Gap between section images

Support
#1

Hi, we have an issue with a gap appearing between a certain section background image and its following image as we scroll down. The other images meet each other (as we would prefer) but this particular section wants to float up creating a white bottom margin before the next image begins.

Could you please see our Page here with this issue? The particular section that is giving us a gap at the bottom is the section with the white SUV in the driveway.

Thanks!

#2

Hello Ergo,

Thanks for writing in!

To resolve this issue, please change the background-position to top center.

Hope this helps. Kindly let us know.

#3

Hi RueNel,

Thanks for the response, but we need for the image to justify bottom left…

Any other thoughts? It does this on our home page image that is supposed to be bottom justified as well.

Steve

#4

Hello Steve,

If you want the image to display at the bottom, please use bottom center. There is no justify in the background image position. Please check this out:

Hope this helps.

#5

Hi RueNel,

The link you sent says that Left is an allowed justification:

top: 0% vertically
right: 100% horizontally
bottom: 100% vertically
left: 0% horizontally
center: 50% horizontally

Also, if you observe the behavior of the image you will see that it is in fact justifying left, with all cropping occurring along the right side of that image as intended. In the image below it is correctly bottom-justified, but the image floats up for unknown reasons so you can’t see as much of the top, and you get the terrible looking white band instead:

Is this just a bug, or is there a way to fix it?

Thanks!

#6

I’ve done a bit more research, and this white space only occurs with bottom justification, and only with the background parallax setting being used at greater than 100%.

Our standard setting is 110%, and this works fine at all other settings (we adjust the section size with CSS: $el {height: calc(((1280vw/1920)/110)*10000);} Where the first two constants are height and width of the background image in pixels and the third is equal to the parallax setting.) but the bottom justification simply moves the image up for no apparent reason. As we enter larger numbers into the parallax size box the image floats higher and higher, and the white band between images grows thicker and thicker.

This only occurs on desktop systems. There is no gap on mobile.

If there was a way to set the parallax size number via CSS media calls, we could solve our problem quite well by simply setting the number to 100 for desktops, which we would prefer anyhow, and ideally allow the 110 value to remain for mobile.

Thanks!

#7

Hello Ergo,

Regretfully there is only one setting for desktop and mobile screens.
I would recommend that you just set the size setting to 100% instead.

Best Regards.

#8

Ok, Thanks.

#9

You’re welcome!
We’re glad we were able to help you out.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.