Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 11, 2014 at 1:44 am #221976
    kevinpropper

    Hi, I’m trying to add a page specific background image. I understand how to add a background image (Enfold>Styling>Main Content>Background Image) site wide. But I’d like to have a unique background image on the “About” page and a different background image on the “Content” page.

    I can add a “Color Section” and then “insert image” but if there’s a sidebar on the page, the background image in the “Color Section” pushes the sidebar content down. Is there a way to fix this? or am I doing something wrong?

    The website url is http://www.cascodesignstudio.com.

    http://cascodesignstudio.com/contact-2 is an example of a “Color Section” with an inserted background image with “no” sidebar. The Telephone pole graphic is working fine but there’s no side bar.

    http://cascodesignstudio.com/services-2 is an example of a “Color Section” with an inserted background image with a sidebar. The “Room Service” graphic appears to be pushing the right sidebar down the page.

    Thanks for your help.

    February 11, 2014 at 7:52 pm #222364
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .page-id-2925 .main_color.container_wrap{
    background: url(_IMG_URL_) no-repeat center center red;
    }

    That will target only the About page container.

    Cheers! 
    Josue

    February 15, 2014 at 1:41 pm #224323
    kevinpropper

    Hi Josue, yes your suggestion resolved the issue with the background image. However depending on what’s being shown in Main Content the height of the page container varies. Is there a way to set the height of the container to fill screen?

    For example:
    On the contact page, http://cascodesignstudio.com/contact-2 I used a variation of the CSS you suggested shown here.
    .page-id-2936 .main_color.container_wrap{
    background: url(http://cascodesignstudio.com/wp-content/uploads/2014/01/CDS-contact-background4.png) no-repeat bottom right #f0f0f0;
    }
    However, when I target the About page the main content area collapses clipping off the background image. My thought is that the Form used on the Contact page is forcing the main content container down therefore showing the background image. The About page has no Form to force the container down.

    Is there a way to set the height of the container?

    I hope this makes sense. I’ve still got so much to learn.

    Best regards and thank you for helping me.
    Kevin

    Thank you for you’re help.

    February 15, 2014 at 5:30 pm #224365
    Josue

    Hey Kevin!

    You can use the min-height property:

    .page-id-2925 .main_color.container_wrap{
    min-height: 800px
}

    Cheers!
    Josue

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Adding a unique page specific background image.’ is closed to new replies.