You can set different background images for different pages through CSS.
First, find the unique class for each page or post. You can do that by looking at the body tag in the browser’s source code for each page or post.
For example, page-id-268 might be one unique page ID class, and you can target its background image like this:
.page-id-268 {
background-image: url('http://path/to/your/image.png') !important;
}
Change the image URL to match your particular image path.
You can add as many images as you like directly in your Media Library.
Don’t edit the theme directly or your changes will be overwritten the next time you update the theme.
An easy way to add custom CSS like this is to install the Jetpack plugin and activate the Custom CSS module. You could also install a standalone custom CSS plugin, or create a child theme.
Let me know how it goes!
Thanks for replay. I still cant target specific page. If I look at code it says something like this: class=”page page-id-5 page-template-default logged-in admin-bar custom-background custom-background-size sidebar-closed customize-support”
I suppose I should go with .page-id-5 .custom-background:… and I tried couple of things but none of them work 🙁
Did you try the format I provided above? For page-id-5 the format would be:
.page-id-5 {
background-image: url('http://path/to/your/image.png') !important;
}
Could you try adding this to your CSS and provide a link to your site so I can have a look directly and see what’s going on? Thanks.
Im doing it locally. I installed that plugin you mentioned, for CSS editing, its working quite well. But that specific thing isn’t. I am going to try again tonight, put that exact line you mentioned.
Alright, it seems it does something, it changes its default bg but instead of the new image I get the preset color(greenish one) It seems the command is good but I’m not pointing at the image correctly?
I put images in img folder that is located in writr folder(theme folder) The image is in jpg format, 968kb. So I put this:
.page-id-5 {
background-image: url(../img/pozadina_02.jpg) !important;
} but it doesn’t work…any suggestions? You already helped a lot, im kinda new to all this stuff, sry if I bother you needlessly 🙂
You need to specify a full path to the image, starting with http:// as in the above example. (If you’re working on localhost or an IP you’ll need to remember to change this path when your site goes live.)
Let me know how it goes.
Hi its me again. I successfully changed the picture but it messes up my other settings. I put
#page:before {
opacity: .7;
background: #020526;
}
in css editor and it works great for home page, but when I click on the page with changed bg, it somehow overrides the effects. Any idea how to make those settings work on all pages? I also tried .page-id-5#page:before but to no use…
I’m not sure what you’re trying to accomplish with the CSS above, and since you can’t provide a link to your site it’s difficult to help with this, especially without screenshots of what’s “messed up.”
Once your site is up on a test server where I can have look at I’d be glad to have another peek!
