Topic: Different background images per page

Eva Pott
November 15, 2023 at 2:41 am

Hello!
How can I assign different background images to different pages? I have different subject areas, each requiring their own background images. I didn’t find any suitable answers in the search function. Thank you!
Best regards
Eva
David
November 15, 2023 at 4:44 am

Hi there,

Will this background be added to the body of the page ?
And how would you choose the image ? eg. the Featured Image.

Let me know
Eva Pott
November 15, 2023 at 8:25 am

Hello David,
the image should only appear in the background of a specific category of pages. Another category of pages should then have a different background image, etc. The landing page does not get any of these background images. I would upload the background images used into the media files beforehand; they come from our corporate identity. They don’t come from posts, for example.
Best regards
Eva
David
November 15, 2023 at 1:16 pm

Could you share a link to one of these pages ?
Eva Pott
November 21, 2023 at 10:58 pm

I have linked the page in the private information.
Fernando
November 21, 2023 at 11:29 pm

Hi Eva,

If the image depends on the category, would pages have just one category or multiple?
Eva Pott
November 22, 2023 at 1:01 am

Hi Fernando,
pages should only have one category and this category should also be made clear by the background image.
David
November 22, 2023 at 3:07 am

OK.
Theres a few different ways to do this. Which will require some configuration.

Can i suggest you start with your Static Pages.

1. in Appearance > GeneratePress, activate the Backgrounds module.
2. in Customizer > Backgrounds – add a background image, the one you will use for ALL Pages.
2.1 Configure the Backgrounds so it looks correct and how you want the images to display.

Once thats done we can add some CSS to remove the image from where it is not required.
And then we can discuss the best way to swap the images based on post category.
Eva Pott
November 28, 2023 at 11:40 pm

Hallo David,
thanks for your answer! I tried it, but I don’t want the landing page (=static page?) to have a background image, so there is no background image that I want to use for ALL pages. I only want to use background images for the four categories “professional”, “individual”, “social” and “cultural” and their subpages. professional: yellow+lettering, individual: green+lettering, social: pink+lettering, cultural: blue+lettering.
Or would I then have to set up a background image that practically does not appear on ANY page, but which then changes depending on the category? That sounds complicated.
Best regards
Eve
David
November 29, 2023 at 3:38 am
OK – lets start over 🙂

In the private information you shared the fachlich ( professional) page.
So i assume we are working with Parent pages and their children.

1. Add this CSS to prepare any parent and child page to have an Image fill the background of the body.
```
.page-parent,
.page-child {
    background-repeat: no-repeat;
    background-size: cover;
}
```
2. Edit a parent page, and check in the browser URL for the Pages ID.
The fachlich Page ID is 23

WordPress includes the ID in the page-id-## and parent-pageid-## CSS body classes.
So you can add this CSS to load an image on the fachlich page ands it children.
```
.page-id-23,
.parent-pageid-23 {
    background-image: url(https://picsum.photos/id/237/200/300);
}
```
Change the https://picsum.photos/id/237/200/300 to the image you want to use.

3. repeat step 2 with the other parent pages, swapping the ID and Image.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Different background images per page