Streaming live at 10am (PST)

Weird spaces between background images on mobile


#1

I have weird chunks of nothing between my background images, how do I clean this up?

http://www.dutchmansgoldthegame.com/

Also this picture from within the designer with mobile view


#2

Hi @Aimanisms, thanks for your post. You can either use an image as a background image and set the background image position set to Cover, or you can use an image widget, inside a container that is set to relative position and give the image a width of 100%. I recommend using images with aspect ratios that are the same as the aspect ratio in the section/container/div etc, where they will be used. I hope this helps. Cheers, Dave


#3

where can I get these specs for for the size per element? Is there a sheet somewhere with these details. Cause in the styles or setting section, it doesn't give me much info about that.

@cyberdave


#4

Hi, thanks for the update. I am not exactly what you mean by the specs for the size per element, do you mean style settings for the background image or image used with image widget? Cheers, Dave


#5

I mean what you said, what are these aspect ratios you are talking about, I can't find the specs/details of them anywhere?


#6

Hi @Aimanisms, that is just a way of thinking how your site elements will be arranged on your layout. Here is some information about Aspect Ratios : http://designshack.net/articles/layouts/understanding-and-working-with-aspect-ratio/

You can apply these principles by sizing the images you use, to be using the correct aspect rations for your layout. A 300x300 image has a different aspect ratio than an image having 300x200. In other words, used logically sized images when covering your sections etc. I hope that helps. Cheers, Dave


#7

@cyberdave Being a filmmaker myself I understand the general concept of aspect ratio. So this general article, doesn't help me in any way understand why I got these weird spaces. I didn't have this issue by the way, before I tried working on making my website parallax.


#8

Sure thing @Aimanisms, don't worry about the aspect ratio stuff, that is just some info that some designers like to use... completely optional and is only supplementary informtation smile I can go take another look at the background image styling: This is the same preview link correct?

https://preview.webflow.com/preview/dtsgold?preview=56505bcc2e82db1c2f8f9cdcfa2bf6e8

One thing I noticed that the BG image is not set to cover, see one example, set your BG images to Cover:

Try that and see if things improve for you. Cheers, Dave


#9

@cyberdave I solved it, the list thing that I had to do for parallax was messing everything up, since I put them back in just sections, my images behaved normally again. But I do want the parallax effect, so what am I missing?


#10

#11

#12

Thanks @Aimanisms for the update. On the parallax design you are trying to create, I will follow up with you on that topic: http://forum.webflow.com/t/parallax-effect-doesnt-work/11078/8.


#13