Lower Background Image sits on top of page

[fbrugger]

Hi there

on my Website https://showmyproject.ch/la-galleria-online-shop/ I use this CSS to fix the lower background image while scrolling down:

.x-bg-layer-lower-image {
background-attachment:fixed;
}

This looks great for me but I would like to see the whole image in height, meaning the image should have a margin of 140px from the top. At the moment, the image starts at the top of the browser and therefore is covered at the top from the white menu bar, which is 140px in height.

The size and position of the background image is set to “Cover” and “Top”. I tried to give the first section a margin of 140px but this only crops the image instead of moving it down.

What do I do wrong?

Thank you very much for your help!

[nabeel]

Hi Felix,

Thank you for reaching out to us. To fix the issue, you need to set the Initial Position of your header bar to Relative instead of Absolute (see screenshot)

You can find this setting by editing your header in header builder and then inspect your Bar, under Setup set the Initial Position to Relative. Now you can remove the 140px margin. Let us know how this goes!

[fbrugger]

Hi Nabeel

Thank you very much for your advice. I did so, but it is still the same. As you see, there are two menus, a higher one which disapears at scrolling and a lower one, which comes down from the top. I have set both of the Bars to Relative and removed the 140 px from the Section, but the image still beginns on top of the browser.

Thank you very much for your help.

[christian]

Hey Felix,

This is because of the background-attachment:fixed;. A fixed background covers the width and height of the screen and its container. You can modify the top position of the background but the result would show a blank space on top when you scroll.

Please remove the background attachment CSS and use our theme’s parallax feature instead. Not to mention that the fixed background position does not currently play well in Safari 13.

If you still wish to use it, try editing the background position like this. Please remember the white space that I mentioned. We can’t help you with that along with the fixed background bug in Safari 13.

Hope that helps.

[fbrugger]

Hi Christian

But this is exactly what I was looking for! Thank you very much for your great help! I set the top position to 70px, what is exactly the height of the thinner menu bar. So you will not notice any empty space.

It would be absolutely great, when the active menu underline would be visible on this page, as it is meant to be a sub-page of the main-menu “Projekte”. But if I set this page as a child-page of the parent menu “Projekte” strangely a blog page which I have made for the Essential-Grid appears.

Any idea what could be the problem?

Thanks again!

[fbrugger]

Hi Christian

I just removed the background attachment CSS because you where right; in Safari 13 it doesn’t move smooth and doesn’t loo good. Is there no way to use the theme’s parallax feature without scaling the background image? These widescreen images are not really suitable for parallax effects and it would be great if I could just fix the background image without scaling.

Thank you very much for your help!

[friech]

Hi Felix,

There is a way to use parallax effect with that image, edit your image on a photo editor application (e.g. Photoshop), then add an empty space top and bottom of your image (around 180px), that empty space area will be the offset when the image gets to scale (with parallax effect).

Thanks,

[fbrugger]

Hi Friech

Thank you very much for this important tipp! That works very well but my pichture is so wide, that it is very hard to controll the viewport of the subject at responsiveness. So I left this picture without any parallax effect.

Thanks again!

[ruenel]

You’re welcome!
It’s good to know that it has worked for you.