I’ve seen several threads on this, but I still can’t figure out what the problem is. I have the standard Vantage theme installed on a local host. I’m trying to add a different full screen image on each page, but I can only update the home page and all other pages have the same image. Below is the code it inserts for the homepage. When I navigate to another page, I get to the page, but the plugin recognizes it as the menu, not the actual page (second set of code inserted).The image is inserted in the menu. I’ve tried clicking in the different areas of the page, but no luck.
Ive tried to manually add the new background images manually by referencing the page id every way I can think of (.postid-28,.pageid-28, .page-id-28, .page-id-28 #main) but no luck. I’m working in layout-full mode. I’m at my wits’ end. All I want to do is add a different full screen image to each page and it seems like the hunt for the holy grail! Im not a developer, so if anyone has a clue and can help, I’d be grateful. Thanks.
#main.site-main {
background-image: url(“http://localhost:8888/Site3/wp-content/uploads/2016/12/shutterstock_99260396.jpg”);
width: 1500px;
height: 1000px;
background-size: cover;
}
.main-navigation ul li:hover > a {
background-image: url(“http://localhost:8888/Site3/wp-content/uploads/2016/12/Green-clouds.png”);
}
Hi Lbennett14,
To be honest, I’m not too sure why it would be selecting the menu (I can’t seem to replicate it so it doesn’t appear to be a general issue) but it sounds like you were heading in the right direction.
Firstly, please do not set a hard width / height. Setting the width of .site-amin to 1500px will cause issues when the user’s device is displaying a resolution lower than that. Setting the height to 1000px will cause issues with page length. If your desire is for it to be at least 1000px, use min-height so that the page height isn’t restricted to 1000px.
Now as for changing page specific background images, you need to use the relevant body_class for that page. Be it page-id-PAGEID, postid-POSTID, .blog, .archive, etc.
So for example, if I wanted to set a custom background for the post that has an id of 372, I would use:
.postid-372 #main.site-main { background-image: url('http://url.to/your.image'); }That’s all that’s required mate.
Thanks Alex. I’ve been playing around with this and was able to resolve the issue by referencing the page-id. I’ve taken your advise and used min-width and height, but I still can’t get my background images to resize for smaller devises. I’m to the point where I might have to just use the build-in slider image on my home page and forego any background images on the other pages. Not the look I want, but I need to be mobile friendly.