Image to fill viewport tutorial?

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
Mecerbranded
 
 
Posts: 13
Joined: Thu Aug 26, 2021 5:51 pm

Image to fill viewport tutorial?

Post by Mecerbranded »

Hi
Can anyone point me to a tutorial where I can learn to make background or other images fill the viewport horizontally?
Thanks
User avatar
Pablo
 
Posts: 23614
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Image to fill viewport tutorial?

Post by Pablo »

Add a layout grid or flex container
Add a background image to the layout grid and set the background size to 'cover'

There are many example templates which demonstrate this functionality:
https://wysiwygwebbuilder.com/templates2023.html
Mecerbranded
 
 
Posts: 13
Joined: Thu Aug 26, 2021 5:51 pm

Re: Image to fill viewport tutorial?

Post by Mecerbranded »

Thanks for responding.
I downloaded a template and extracted the zip contents. When I open the wtp file in Web Builder, I see no no images. I'm using Web Builder 18.3.0.

When I place a background image with size set to cover in a layout grid and preview it, I see nothing. No Image.

When I place a background image with size set to cover in a flex container, and preview it, I see a thin horizontal strip of the image, and not the
1600x900 pixel image I used for a background.

Any further advice would be appreciated.
Last edited by Mecerbranded on Sun Jul 23, 2023 2:25 pm, edited 1 time in total.
User avatar
Pablo
 
Posts: 23614
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Image to fill viewport tutorial?

Post by Pablo »

Did you install the template the correct way?
https://wysiwygwebbuilder.com/using_templates.html

Did you look at the previews? Isn't this what you want?
Mecerbranded
 
 
Posts: 13
Joined: Thu Aug 26, 2021 5:51 pm

Re: Image to fill viewport tutorial?

Post by Mecerbranded »

I do not want to use a template.
I only want to learn how to make images fill the screen horizontally.

I downloaded a template to figure out what properties are set to make images fill the screen, but when I open the wtb, I see no images.

I figured out how to install a template and can see its images now.
User avatar
Pablo
 
Posts: 23614
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Image to fill viewport tutorial?

Post by Pablo »

ok, then did you try this?
Add a layout grid or flex container
Add a background image to the layout grid and set the background size to 'cover'
If that does not help then where does it stop working for you?
Mecerbranded
 
 
Posts: 13
Joined: Thu Aug 26, 2021 5:51 pm

Re: Image to fill viewport tutorial?

Post by Mecerbranded »

Hi Pablo,

I copied the flex container and background settings from the "Bakery" template and it is working for me now. Thanks for your assistance, it is much appreciated.
Post Reply