Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 24, 2015 at 1:26 am #557299
    dror64

    Hi,
    This is a Grid Row, Section Colors question.
    Is it possible to add an image background to the whole section/row of the grid row element instead of just picking a color schemes that are defined on the theme styling page.
    See links!
    Please note that I tried working with the section color bellow with an image background that has 3 single columns (layout elements) – the only issue is, that they can only stretch within the boxed layout and not to the full page width as the grid row does.
    Thanks

    December 28, 2015 at 1:07 am #557628
    Elliott

    Hi Dror!

    Give the grid row element a custom ID and then use some CSS like this.

    #yourID { background: url("URL to your image"); background-size: contain; }

    To give it a background image.

    Cheers!
    Elliott

    December 28, 2015 at 7:24 pm #557805
    dror64

    Excellent!!
    I used this in the custom CSS:
    #nd-gridrowimage {
    background: url(“http://mostlynet.org/pc-security/wp-content/uploads/2015/12/ny-city-gray.jpg”);
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: contain !important;
    }

    Is there any way to achieve the parallax effect instead of just fixed (background-attachment: fixed) – I tried with no luck.

    Thanks a lot for the main fix.

    December 28, 2015 at 10:48 pm #557875
    Basilis

    Hi!

    You will do need a bit more of CSS & help for that.
    Give it a look here:
    http://codepen.io/stefanjudis/pen/nrzHI

    and let us know if you do understand it and can work it out.

    Cheers!
    Basilis

    February 2, 2016 at 10:24 am #576341
    Kai

    Hello,

    I have a linked question. I’m stretching my background and place it to the centre. I’m using this quick css-code:

    #id-1, #id-2 {
background-image: url(link-to-background-image);
background-size: contain !important;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}

    My problem is the header. I need a centration without the header, because it is covering my background-image partly there. A header transparency is not a solution for me, because I’m using a very light watermark background-image.

    Are there any solutions?

    Thanks and Best Regards
    Kai

    February 2, 2016 at 5:48 pm #576592
    Yigit

    Hi!


    @fountain_k     You can go to Enfold theme options > Header > Transparency Options and upload your transparent header.
    If that does not help, please post a screenshot showing the exact issue you are having when you are using transparent header so we can see if we can come up with a good solution

    Cheers!
    Yigit

    February 2, 2016 at 7:38 pm #576650
    Kai

    This is my problem by using “background-size: contain” and “background-position: center center”:
    background-image_behind-header

    As you can see, the round wordpress logo is behind the header by using my color-section-id at quick-css. What is the best way to solve the problem? The best would be a image which is placed below the header with “background-size: contain” included. Later I would use a background-image as a watermark which has a opasity of 10%. So, a transparency header would be a worse stopgap for me.

    Cheers
    Kai

    • This reply was modified 8 years, 9 months ago by Kai.
    February 4, 2016 at 10:46 pm #578114
    Kai

    Hello Yigit,
    Did you understand by problem or do you have any further questions?
    Thanks
    Kai

    February 8, 2016 at 1:43 pm #579597
    Vinay

    Hi!

    Please replace these two lines in the above css rest of the css remains the same

    #id-1, #id-2 {
background-size: contain !important;
background-position: center center;
}

    to 

        background-size: 75vh !important;
    background-position: center 100px;

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 9 months ago by Vinay.
    February 8, 2016 at 8:47 pm #579884
    Kai

    Hi Vinay,
    Thanks for the effort!
    You replaced “contain” by “75vh” at background-size. That is a way I could go, but it gives me a new issue. If I change the browser-window-size I lose the “auto-resize” functionality of “contain”. Do know how to solve the new issue?

    Thanks again!
    Kai

    February 8, 2016 at 10:51 pm #579948
    Vinay

    Hi!

    What if you used the image with extra 100px white padding so that the circle will look smaller. Can you create a page where we can see the auto resize issue please .

    Best regards,
    Vinay Kashyap

    • This reply was modified 8 years, 9 months ago by Vinay.
    February 9, 2016 at 8:11 am #580190
    Kai

    Hello Vinay,
    I think so, the best solution could be a new image with a oversize. I will try it later.
    Please find the new page as requested as a private contant.

    Thanks
    Kai

    February 10, 2016 at 6:57 am #580826
    Ismael

    Hey!

    New page with auto-resize-problem (background-size: 75 vh):

    Use css media queries for smaller screens. Example:

    @media only screen and (max-width: 767px) {
   #id-temp {
      background-size: 75vw !important;
   }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.