Jump to content
Sign in to follow this  
mwest

Background Image not displaying properly

Recommended Posts

mwest    0
mwest

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mwest    0
mwest

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×