Image width in parallax and layout grid

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
LJLachance
 
 
Posts: 92
Joined: Sun Feb 04, 2018 8:19 pm

Image width in parallax and layout grid

Post by LJLachance » Tue Nov 06, 2018 2:34 pm

I am attempting the use of parallax for the first time and I am using a layout grid for this. I am also using wb14_corporate as my guide. I have an image that I've resized from large to small (774 X 262), (1366 x 462) and a couple other larger and smaller versions. I've tried using "fixed" vs "parallax" in the settings and played with almost all of the other settings and I must be missing something.

When viewing in design mode, the image fits perfectly inside of the layout grid. When previewing (using Chrome), while the image and parallax work perfectly, the width of the image appears to be enlarged or stretched meaning only a portion of the image is contained in the grid.

Is there a way to have the FULL width of the image appear?

In a post
Post by tjp28blue » Thu Mar 29, 2018 9:49 pm he writes - No matter what size image I use, when I preview it parallax always enlarges the image and only a small portion is visible in preview.
Mine appears to be a similar issue yet not the same except that parallax enlarges the image allowing only a portion to be visible.

Where am I missing something?

Thanks

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

Re: Image width in parallax and layout grid

Post by Pablo » Tue Nov 06, 2018 3:11 pm

the width of the image appears to be enlarged or stretched meaning only a portion of the image is contained in the grid.
That is the way it is suppose to work!
When using parallax, the background size will be set to 'cover' to fill the entire background.
https://www.w3schools.com/cssref/css3_p ... d-size.asp

LJLachance
 
 
Posts: 92
Joined: Sun Feb 04, 2018 8:19 pm

Re: Image width in parallax and layout grid

Post by LJLachance » Tue Nov 06, 2018 5:33 pm

Well, it is actually filling the entire background but the entire image is rendered larger than the container even if the size of the image is, for instance, 1/2 of the screen width. So, if I have a screen width of 800 px for example, and the image is 400 px X 400 px - I would think the entire image would stretch to 800 px. But, what appears to happen is the image stretches beyond 800 px (outside the container) - cutting roughly 20% of all four sides of the image. Hoping that description makes sense. I wish I could remember how to post a screenshot here so I could show you what I'm trying to say and describe. I'll go to plan B and use another image.

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

Re: Image width in parallax and layout grid

Post by Pablo » Tue Nov 06, 2018 5:51 pm

Well, it is actually filling the entire background but the entire image is rendered larger than the container even if the size of the image is, for instance, 1/2 of the screen width.
This depends on the aspect ratio of the image vs the aspect ratio of the page/view aera.
And, of course there also needs to be some margin for scrolling otherwise you will not see the parallax effect.

So, the size and aspect ratio of the image is important in relation to the view area of the image.

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests