[Support request] Generatepress Full background image for each page

Home Forums Support Generatepress Full background image for each page

  • This topic has 9 replies, 2 voices, and was last updated 3 months ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1043063
    Makan

    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,

    #1043198
    David
    Staff
    Customer Support

    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?

    #1043711
    Makan

    Hi,
    Thanks for the answer.

    It is not a lot actually. Maybe 10 pages! and they are standard attachment,

    #1043723
    Leo
    Staff
    Customer Support

    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 🙂

    #1044793
    Makan

    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);
    }

    #1045274
    David
    Staff
    Customer Support

    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);
        }
    }
    #1047432
    Makan

    Thanks for the awesome support.
    It works.

    #1047565
    David
    Staff
    Customer Support
    #1340624
    mikimunoz@hotmail.com

    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

    #1340745
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic for your question?

    Thanks 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.