Archived topic
Generatepress Full background image for each page
9 replies · Started by Makan on October 24, 2019
Hi,
I actually need to add different full background image to each page of my website.
I used customize>background image>body to assign a background image to my website. It works, but I need to change the background image for each page.
Thanks,
Hi there,
how many pages are we dealing with ?
And is the image just a standard attachment or is it the Featured Image for the page?
Hi,
Thanks for the answer.
It is not a lot actually. Maybe 10 pages! and they are standard attachment,
You'd need to write a block of CSS for each page:
body.page-id-xxx {
background-image: url(https://IMAGE-URL-HERE);
}
body.page-id-xxxxx {
background-image: url(https://IMAGE-URL-HERE);
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Thank You so much.
It works for the pages.
and I have another question.If I want to assign two different background images for each page, one for desktop version and one for mobile version, how should I edit the following code?
body.page-id-xxx {
background-image: url(https://IMAGE-URL-HERE);
}
Hi there,
apply your backgrounds like so:
/* Desktop Images */
@media(min-width: 769px) {
body.page-id-xxx {
background-image: url(https://IMAGE-URL-HERE);
}
body.page-id-xxxxx {
background-image: url(https://IMAGE-URL-HERE);
}
}
/* Mobile Images */
@media(max-width: 768px) {
body.page-id-xxx {
background-image: url(https://IMAGE-URL-HERE);
}
body.page-id-xxxxx {
background-image: url(https://IMAGE-URL-HERE);
}
}
Thanks for the awesome support.
It works.
You're welcome
Hello,
This contribution has also been great for me.
Would it be possible instead of an image, to set a slider as background?
Thanks in advance
Miki Muñoz
Any chance you can open a new topic for your question?
Thanks :)