Optimize Press 2 - Background Image

by art72
3 replies
  • WEB DESIGN
  • |
Hi, I am "trying" to create a custom landing page "series" with a full background image... in OptimizePress 2.0 (as stand alone pages) as a 3-4 page sales funnel with a "background image" on specific pages.

What I am trying to figure out;

Is there an easy way to add a large "fixed" background image (975px width x 1500px in height) whereas I can add content over that background image, like other images, such as, text, my video (VSL), and an optin button?

I had planned to use an overlay "pop up" optin then redirect to a "Thank-You" special offer page before giving them their free download access. (*So at best, I need to create 4 pages congruent with the background, each page having different content. But, I am clueless as to how to make the image the background?

I designed the entire landing page in Photoshop, and have the "elements" in sections (i.e. header, background image, footer, a custom banner/divider with custom text, etc...) What I'd like to be able to do is change the white space on the page post section, and write on or overlay other images a top of a background image...

Is there an easy way to add the background image on "specific pages" only?

If so, would this require editing the main site css files? or can it be done from a new page creation?

I understand the "page builder" option allows for pre-templated opt-in pages, whereas, I can change the full screen background image w/ a predetermined "optin box" feature, but I cannot determine: if there's a way to create a complete custom landing page with header, full background image, and adding elements such as a video intro, with a "Get Access Button" that opens an optin form..."without" altering my overall settings for my blog, other pages, etc...

I'll add an image here in a minute to better detail "What I am trying to do" - Thanks...



*Ultimately, I wanted the entire background image to be a full screen/width, and have 3 elements (video player, button, and privacy & legal disclaimer links being responsive... or clickable. Can this be done with OptimizePress 2.0?

Art
#background #image #optimize #press
  • Profile picture of the author art72
    Ok, I've gotten as far as to create a background image using the Page Settings > Custom CSS - but the image size is 975px x 1500px, and I cannot determine; "How to make it scroll the entire picture?"

    It keeps "cutting off the image" at around... 975x750 - Anyone know what I can add to the following to make a scrolling background?

    body{
    background: url(http://mybackgroundimahe.com/wp-uploads/etc....) no-repeat !important;
    }

    If anyone could suggest what "content template" might allow a larger image with a CSS script for scrolling... I'd be forever grateful.... Thanks!

    Art
    Signature
    Coming Soon... *Laser Targeted Lead Generation Services
    {{ DiscussionBoard.errors[10456053].message }}
    • Profile picture of the author Patrick
      Originally Posted by art72 View Post

      Ok, I've gotten as far as to create a background image using the Page Settings > Custom CSS - but the image size is 975px x 1500px, and I cannot determine; "How to make it scroll the entire picture?"
      This is not happening due to CSS. This is happening due to the code pulling an "image size" and not the "full image". But this can be solved with CSS too.

      If your theme has Custom CSS in theme options or settings, then you can insert the code for the body tag with the background image. The fix is simple, just remove the "-975x750" from the image, which would be in the end. So for example the code is

      background: url("....../imagename-975x750.jpg")

      change this to

      background: url("....../imagename.jpg")
      {{ DiscussionBoard.errors[10487536].message }}
      • Profile picture of the author art72
        Patrick,

        Thanks for your response. I've since learned several simple "css tweaks" that have allowed me to put a full size background image, with and without scrolling.

        As you mentioned; the OP 2 theme does have 'custom css' and allows for several sections to have different backgrounds, gradients, images, etc... Thanks to Youtube, I found some really cool (and simple) design tweaks.
        Signature
        Coming Soon... *Laser Targeted Lead Generation Services
        {{ DiscussionBoard.errors[10488040].message }}

Trending Topics