Create a Static Background Image in OptimizePress 2.0

[code]#le_body_row_1{ background: url(http://YOUR-IMAGE-URL.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}[/code]

 

[code]//add this if you want to have the elements above the image to be ever so slightly transparent.
.opacity {
opacity: 0.95;
}[/code]

 

14 Comments

  1. collin on January 29, 2015 at 10:48 pm

    Right on time with this post when I needed it most thanks. I am going to try it right now.

  2. Andrew on April 17, 2015 at 11:39 am

    Great, thanks so much Darren.

    One question though. It the background image supposed to scroll on laptop and desktop browsers? Maybe I’m just thinking the other way round.

    If not, do you know how to make it stay fixed?

    Thanks again Darren.

    Much appreciated.

    • Andrew on April 17, 2015 at 11:48 am

      I mean fixed, and responsive on all devices?

      Thanks

      • Darren Crawford on April 18, 2015 at 2:11 pm

        That might device specific. I’ve got a few pages that are shorter in nature but the image is staying put on iphone 6. Somebody that is a CSS expert could probably tell you if there are additional codes needed.

  3. Alexander on May 17, 2015 at 2:43 pm

    Hi Darren,

    Your example looks fantastic. I followed your instructions, but no bananas. Does not seem to work here.
    Realize how hard it would be to offer your help, but perhaps a pointer or two will do…?

    Thanks in advance.

    Alex

    • Darren Crawford on May 17, 2015 at 4:03 pm

      Can you paste a screenshot of what you are seeing or what is happening?

    • Alexander on May 17, 2015 at 4:30 pm

      Figured it out. Not sure what I did but seems to work like a charm now.
      Saving changes and close the LiveEditor might have had some effect.

      Thanks, great code..!

  4. Fabio on May 20, 2015 at 2:24 pm

    Thanks for the tip Darren!

  5. Ed on May 23, 2015 at 7:32 pm

    Hey mate,

    Great vid! Do you need to add padding to the rows to make them bigger height wise? Mine come out really small in terms of height when I use this!

    Also, can you paste me the code with that opaque bit in – I can’t tell from this exactly where it needs to go…

    Thanks so much,
    Ed ed@edbarker.co.uk

    • Darren Crawford on May 25, 2015 at 9:06 am

      Yeah I add some spacer pixels if it is too small. The opacity code goes in the CSS section.

  6. Ryan on October 2, 2015 at 1:52 am

    Hey Darren,
    I’ve tried numerous times but OP keeps crashing when I try to add this code into the custom CSS.
    Any thoughts?
    Ryan

    • Darren Crawford on October 3, 2015 at 10:35 am

      Couple things I’d check… First make sure you have the latest version. Second try making this on a brand new blank page and see if it works. I’ve found sometimes old pages inherit some gremlins that just cannot be explained. If it works on a new page then your older page might have an issue causing it. You could also do some firebug checking to see if anything pops up there. Good luck.

  7. THEMRC on October 4, 2015 at 11:22 am

    Hey Darren,

    is there a way to hide the white bar at the end of the page? The background picture seems to stop a few pixel right before the bottom of the page. Firebug says, it’s a “body {
    background-color: #fff;
    }”

    However, I couldn’t hide it (“display:none;”) or make it transparent. Even checking the “full width row” does not work here…

    Hope you can help me 🙂

    MRC

  8. Roberto on July 14, 2016 at 10:17 pm

    HI, Darren

    What should be the background`s size of the picture?

Leave a Comment