Page background image and pro builder

[Lorenmn]

I have a page that I have allocated 3 background images (so they slide) just using the simple settings in the page editing view. This works great.

Next I want to use the Pro builder to add content, but it puts it all above the background images. I’ve tried to do the same thing using the simple Gutenberg editor and the same thing happens.

What use is the background image if it’s not background to anything?
The page can be seen here > https://fieldgateflowers.co.uk/new-homepage-design/

What am I doing wrong?

[ruenel]

Hello @Lorenmn,

Thanks for writing in! The Blank - No Container | No Header, No Footer page template is best to use by inserting sections and setting up background options in each section. The page background image can be used with other templates. To be able to have it your way, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Therefore, you can use this code and add CSS code into X > Theme Options > CSS.

.site, .x-site {
    background-color: transparent;
}

So that the background image will be visible.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

[Lorenmn]

You say that the page background can be used with other templates, but I don’t want to use another template. I want to use the no container, no header, no footer one so I can have a full page background image.

Ok, so what if I used 1 section with that template. How can I make that section full page automatically? And is there a way to have 3 images that slide?

[ruenel]

Hello @Lorenmn,

Adding the custom CSS into your X > Theme Options > CSS should resolve your issue that will work with no container, no header, no footer page template.

Anyway, regarding your question; there is no feature that you can insert 3 images that slide in the section background. You can only insert a video background, color, single background image, and a custom background.

Best Regards.

[Lorenmn]

Ah, the css works brilliantly! Thank you.

And by using the page background image setting (in the Wordpress editor view) I can have several images that slide. Win win.

[Lorenmn]

Ah, one more thing…

On a page with several sections - and each section having a background image (set in the section settings), how can I make each section (well the first one at least) fill the screen - until the user scrolls?

[Indirectelex]

Fun fact you can actually record a slider and paste it as a video background, but how can you reach the background lower layer? Well right here :

[ruenel]

Hello @Lorenmn,

On a page with several sections - and each section having a background image (set in the section settings), how can I make each section (well the first one at least) fill the screen - until the user scrolls?
– The height of the section is dependent on the height of the row which is again dependent on the contents of the columns. To make the section go fullscreen, you need to set the minimum height of your column to 100vh.

@Indirectelex:
Thanks for chiming in!

[Lorenmn]

Brilliant. Thanks. I’ll give that a try.

[tristup]

Hi @Lorenmn,

Glad to help you with this, please let us know how it works for you.

Thanks