This is probably not really specific to your theme. Sorry but i’m relatively new to working on websites but i am trying to learn.
What i’m wanting to do is change the background image of a single page. I’ve tried looking at the customize option but that seems to change the background image of all the pages on the site. I’m looking to leave the main page with no image and one of my sub-pages with a background image.
Could anyone give me some guidance on this?
Thank you very much in advance,
Paul
Hi Paul
Please let us know which theme you’re looking to do this with and we’ll try help out with some Custom CSS.
Thanks
Andrew
I believe i am using the vantage theme
PS i cant login with my original login. Using the forgot password doesn’t send an email to me.
ok. nm on the password issue. it finally sent me a reset email
If you inspect the source code for any page you’ll find a body tag near the top. Within that body tag is a unique page class you’ll need to use that page class to prefix the #main container to run a background image for a particular page.
So for example if it were this page, right here on the forum, we’d insert the following under Appearance > Custom CSS:
.postid-3621 #main { background-image: url("http://localhost/so/wp-content/uploads/2014/09/wallpaper-2677423.jpg"); }You’d also need to change my file url with yours.
If you haven’t ever inspected page source before, here is our tutorial on using the developer tool to do so:
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
If you’re running Vantage Free you can insert the CSS snippet into a Custom CSS module like the one included with Jetpack:
http://jetpack.me/support/custom-css/
I believe it’s the paid version and not the free. I’ll take a look. Quick question, am i modifying the actual pages file manually? Or is there a “Custom CSS” input box within the theme?
ok. never mind i think i understand now.
i’ll be working it and let you know if there are any complications i need help with.
Thank you very much for your guidance
For sure. Good luck with your project.
ok. it worked. I was a little amazed that i did it without messing it up somehow.
what i’ve noticed (but not sure its related) is that the “custome CSS” feature no longer lets me pick a background image.
After i changed the background image of my “Web-service” page with your instructions, i continued to the main page and attempted to change it’s background image. When i go into Appearance-Custom CSS and i open up the Page accordion, then try to select an image file to use as a page background image it doesn’t work. What happens is i select the image and it sits there fore ever. when i check i see that the image is uploaded to my server but for some reason never applied.
Does this mean i need to manually set all my background images from now on? (As you have previously described above)
As long as #main is prefixed with the body class of the page you’re setting the background image of, then there shouldn’t be a negative effect on your ability to set the global background image. Perhaps confirm your url for me and I’ll check this.