Page 1 of 1

Responsive background image

Posted: Fri Apr 19, 2019 7:11 pm
by 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

Re: Responsive background image

Posted: Fri Apr 19, 2019 7:29 pm
by crispy68
Set the background image to 'cover' and set the horizontal & vertical to 'center'

Re: Responsive background image

Posted: Fri Apr 19, 2019 7:48 pm
by dnlyko
What tool in the toolbox would I use to place the picture that will give me those options

Re: Responsive background image

Posted: Fri Apr 19, 2019 8:00 pm
by 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.

Re: Responsive background image

Posted: Fri Apr 19, 2019 8:22 pm
by 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

Re: Responsive background image

Posted: Fri Apr 19, 2019 8:46 pm
by 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.

Re: Responsive background image

Posted: Fri Apr 19, 2019 8:52 pm
by 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

Re: Responsive background image

Posted: Fri Apr 19, 2019 8:57 pm
by 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

Re: Responsive background image

Posted: Fri Apr 19, 2019 8:59 pm
by 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.

Re: Responsive background image

Posted: Fri Apr 19, 2019 9:10 pm
by dnlyko
Thanks Pablo, that was quick and easy. Works like a charm.

Re: Responsive background image

Posted: Fri Apr 19, 2019 9:11 pm
by dnlyko
crispy68 wrote: Fri Apr 19, 2019 8:59 pm 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

Re: Responsive background image

Posted: Sat Apr 20, 2019 12:54 pm
by dnlyko
Pablo wrote: Fri Apr 19, 2019 8:57 pm 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.

Re: Responsive background image

Posted: Sat Apr 20, 2019 1:23 pm
by Pablo
It also works wirh a master page.