Responsive background image

[dnlyko]

Is there an option to have a background image on a page adapt it's size according to the browser size viewing it without using breakpoints

[crispy68]

Set the background image to 'cover' and set the horizontal & vertical to 'center'

[dnlyko]

What tool in the toolbox would I use to place the picture that will give me those options

[crispy68]

If you want the whole background of the page, go to page properties, style tab and choose image.

You can also set the background of a layer/layout grid by doing the same.

[dnlyko]

On a blank page I insert a 'Layout Grid'
In 'Object Properties/General' I remove one column.
In 'Object Properties/Style/Background/Mode' I select image and then select my image from folder.
In 'Size' I select 'contain'
then set H & V to center

nothing appears on preview and on page the LayoutGrid is only 60H

what am I missing here

[Pablo]

A Layout grid without content will have no height.
The reason why you see it in the workspace is because otherwise you would not be able to drag any objects in it.

[dnlyko]

Yes I know.
Do you have any documentation step by step procedures to carry out this function.
I want one thing on the page: a photo displayed that will be responsive to browser size.

Image is 3749X2500 if that is a concern

[Pablo]

1. Open the page properties -> Style
2. Set a background image
3. Set the background size to 'cover' (or 100% 100%)

For Layout Grids there are several example templates that have a responsive background image
http://wysiwygwebbuilder.com/templates8.html

[crispy68]

As a suggestion, you need to reduce the size and compress that image. It is way too big to use and will cause slower loading times.

[dnlyko]

Thanks Pablo, that was quick and easy. Works like a charm.

[dnlyko]

As a suggestion, you need to reduce the size and compress that image. It is way too big to use and will cause slower loading times.

Building for the future: 5G / 4K

[dnlyko]

1. Open the page properties -> Style
2. Set a background image
3. Set the background size to 'cover' (or 100% 100%)

For Layout Grids there are several example templates that have a responsive background image
http://wysiwygwebbuilder.com/templates8.html

So I'm guessing this will not work with a 'master-page' as the background image is not content.

[Pablo]

It also works wirh a master page.