Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Different background images per page

  • 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

  • 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

  • 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

  • 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-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.

    .parent-pageid-23 {
        background-image: url(;

    Change the 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.