-
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 -
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
-
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 -
Could you share a link to one of these pages ?
-
I have linked the page in the private information.
-
Hi Eva,
If the image depends on the category, would pages have just one category or multiple?
-
Hi Fernando,
pages should only have one category and this category should also be made clear by the background image. -
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. -
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 -
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.
ThefachlichPage ID is23WordPress includes the ID in the
page-id-##andparent-pageid-##CSS body classes.
So you can add this CSS to load an image on thefachlichpage 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/300to the image you want to use.3. repeat step 2 with the other parent pages, swapping the ID and Image.
-
Thank you, Dave!
It basically works! One thing still bothers me: I created the background image with Adobe Illustrator in the size 1920×1080, of which only a section was shown in the background. The image should remain visibly fixed at full width, but the foreground should float above it. What do I have to add to the CSS for this?
I decided not to use a background image for now, but only the appropriate background colors (for example #FDFABD for “FACHLICH” and its child pages). I managed to put this in css 🙂 I need to discuss with my team whether we want to end up using the image or just the colors.
Best regards
Eva -
If you want to fix the background then in step #1 use this CSS instead:
.page-parent, .page-child { background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }For the colors – are you ok with getting that to work ?
-
Thank you very much! I will discuss both variants in my team. I also managed the floating with your help.
For the color behind the four categories I used the following css:
.page-parent,
.page-child {
background-color: no-color;
background-size: cover;
}
.page-id-23,
.parent-pageid-23 {
background-color: #FDFABD;
}
.page-id-24,
.parent-pageid-24 {
background-color: #DBE9CC;
}
.page-id-25,
.parent-pageid-25 {
background-color: #EFD6DA;
}
.page-id-26,
.parent-pageid-26 {
background-color: #DFE9F8;
}Is this ok? It definitely works 🙂
I have a question about embedding PDF documents as sort of “printouts” on a page without black frames, if possible without an additional plugin. Should I open a new topic for this?
-
Glad to hear that worked, and yes that way is oK 🙂
-
Hello!
I now have another sub-level in the “Subject” area (the individual subjects, e.g. biology, chemistry under “Subjects”), which should also have the background color of “Subject” and its sub-pages. What is the best way to write this in the css?
Thank you very much!Best regards
Eva -
Hi there,
the two url examples you provided take me to a login page. Can you confirm the URLs ?
- You must be logged in to reply to this topic.