Archived

This topic is now archived and is closed to further replies.

  • 0

Background Image not displaying properly

Question

Posted · Report post

I need help getting my background image to display across the entire background (including the branding section) - only on one page (the "Thank You" page -http://newportavelandscaping.com/thank-you/).

 

Currently, the image is not displaying across the entire page nor the branding section. Also, the image is being cutoff by the footer section. 

 

Any help is much appreciated. This is the custom css for the page:

 

body.page-id-461 .page-canvas {
background-image: url(http://newportavelandscaping.com/wp-content/uploads/2013/03/thank-you2.jpg);
background-repeat:no-repeat; 
background-attachment:scroll;
background-position: 0% 0%;
} 

 

 

 

 

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

The footer background is coming from the body background, which is why the background image isn't displaying there. Have you tried applying the background-image to just the body tag instead of the page canvas?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes. When I do this, the image is placed below the footer for some reason... See the example.

 

Thank-You-Newport-Ave-Landscaping.png

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there

 

I see you'd edited the css for the image, its showing as a bg, but not full width. You'll need to add a width in % to make it span the entire page.

 

Like the following. ps: You still have a color in the header area you'll need to remove

 

body #page .page-canvas {
    background-color: #FFFFFF;
    background-image: url("http://newportavelandscaping.com/wp-content/uploads/2013/03/thank-you2.jpg");
    background-size: 100% auto;
}

 

http://screencast.com/t/yS8dMIdh

Share this post


Link to post
Share on other sites