[Resolved] body background image

[Petri]

I want to add a photo as background for the body.
In GP premium I see the option to add a background image in: Customizing ▸ Background Images -> body.
However for the different pages I need different background-photos, it would be nice if I can use the Featured image for this goal.
Is this possible?

Thanks.

[Ying]

Hi there,

There’s no such option in GP out of box, unfortuanly.

But we can try this workaround by inserting a GenerateBlocks container with the dynamic background image (featured image) to the body element.

Steps:

1. Go to appearance > elements, and create a new block element, choose hook as the element type, and choose wp_body_open as hook name, choose location according to your needs.
https://www.screencast.com/t/L4XfkjMLs

2. Add a container block of GenerateBlocks, set the dynamic image background:
https://www.screencast.com/t/ty8k2VFBW

3. Add a CSS class to the container block, eg. body-background:
https://www.screencast.com/t/osH2dSPRNf

4. Add this CSS to customizer > additional CSS:

.gb-container.body-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

body {
    position: relative;
}

[Petri]

Thank you Ying, this works fine!

[Ying]

Glad to hear that 🙂

[Brad]

Hello – would this solution work for creating a body background image for something like this website: https://fohandboh.com/

When I add it in backgrounds it starts below the header. https://wordpress-624836-3063708.cloudwaysapps.com/expertise/

[Fernando]

Hi Brad,

How are you adding it currently? Adding it manually as Ying did should ideally work.

[Author]

Posts