Jump to content
Sign in to follow this  
5344

Separate Background and Container Background Images...

Recommended Posts

5344

Hi, I would like to have a different background image for each page. No problem I set it via the page settings and it works. BUT then I want to have one background image behind the container, when I do this it overwrites the page background image. How can this be done? In other words I want the container background image to be controlled by the background image settings but set a permanent background image that will be a body background. I have set my page to a "Content Width Page" under color control > Site Design Mode. You can see the site at the link posted, I just want to replace the white body background with an image... Thanks!

Share this post


Link to post
Share on other sites
Andrew
So to clarify, you want: 1. Two background images, one for body one for the content 2. The content background needs to change, page by page? This is possible with a hook and css, but will take some coding. We can help.

Share this post


Link to post
Share on other sites
5344
Yes that is it exactly. I was hoping that the in page setting for background image would go to the container as it is now, it will function fine as is, but its just I want to have a set background image.

Share this post


Link to post
Share on other sites
catrina
As you've already seen, the background image (this is the background for the overall body) can be set in the settings, but the background image for the container will require CSS added to Settings > Custom Code > Custom CSS. You'll need two pieces of information to create the CSS you need to add the background image to the container in the right page: -The page ID for the page in which you want the container background image to appear >>>You can always find the page ID in the tag at the top of the page's source (it's always a number like 3 or 17 or 2056) -The full image URL for the container background image you want >>>You can grab the image URL by looking up the image details in your Media Library Does that make sense so far?

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
5344
Makes sense, yes, do you have an example of the code I would use? Not quite sure how I would start...

Share this post


Link to post
Share on other sites
catrina
The CSS attribute you'd use would look like this: [code]{background-image: url('http://FULLIMAGEURLFORCONTAINERBACKGROUND');}[/code] For more background image attributes, please see the background image documentation here: http://w3schools.com/css/css_background.asp

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
5344
No i understand that :D I know css quite well but not sure how to attribute specific backgrounds to certain pages? Can you provide an example please.

Share this post


Link to post
Share on other sites
5344
Ok think I have it sort of figured out. Im using this: [code].page-id-2 { background-image:url("../wp-content/themes/burnhardt/img/background.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:center top; background-size:100%; }[/code] and its working, but on a page that already has a background set (container background) it just re-sizes that background and is not doing what I need it to do. So again to clarify: I want to have the page options "background image" to be the background of the container, I then want to set a background image that will be on the canvas/behind the main page. Thanks ps: I have made a fix by simply just slicing my entire container background and canvas background as one image then using the above css which works but it would be nice to control the container BG by the built in bg feature.

Share this post


Link to post
Share on other sites
Danny
Hi, Do you require further assistance or is the issue now resolved ?

Please search our forums, before posting!

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  

×