Responsive background image

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
dnlyko
 
 
Posts: 43
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Responsive background image

Post by dnlyko » Fri Apr 19, 2019 7:11 pm

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

User avatar
crispy68
 
 
Posts: 563
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive background image

Post by crispy68 » Fri Apr 19, 2019 7:29 pm

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

dnlyko
 
 
Posts: 43
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: Responsive background image

Post by dnlyko » Fri Apr 19, 2019 7:48 pm

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

User avatar
crispy68
 
 
Posts: 563
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive background image

Post by crispy68 » Fri Apr 19, 2019 8:00 pm

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
 
 
Posts: 43
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: Responsive background image

Post by dnlyko » Fri Apr 19, 2019 8:22 pm

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

User avatar
Pablo
 
Posts: 17620
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive background image

Post by Pablo » Fri Apr 19, 2019 8:46 pm

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
 
 
Posts: 43
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: Responsive background image

Post by dnlyko » Fri Apr 19, 2019 8:52 pm

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

User avatar
Pablo
 
Posts: 17620
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive background image

Post by Pablo » 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

User avatar
crispy68
 
 
Posts: 563
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive background image

Post by crispy68 » 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.

dnlyko
 
 
Posts: 43
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: Responsive background image

Post by dnlyko » Fri Apr 19, 2019 9:10 pm

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

dnlyko
 
 
Posts: 43
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: Responsive background image

Post by dnlyko » Fri Apr 19, 2019 9:11 pm

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

dnlyko
 
 
Posts: 43
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: Responsive background image

Post by dnlyko » Sat Apr 20, 2019 12:54 pm

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.

User avatar
Pablo
 
Posts: 17620
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive background image

Post by Pablo » Sat Apr 20, 2019 1:23 pm

It also works wirh a master page.

Post Reply