Site logo

Archived topic

Generatepress Full background image for each page

9 replies · Started by Makan on October 24, 2019

Viewing posts 1–10 of 10

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 :)

This archived topic is closed to new replies.