How can I keep my banner image fixed while scrolling?

Store Design
, ,
1

Hi,

I am trying to make the image banner’s image to stay fixed while I’m scrolling down, but for some reason I can’t make it happen, I tried this code:

div.banner__media.media {
background-attachment: fixed !important;
background-position: top center;
}

https://elaskincare.myshopify.com/

Can someone help ?

Thank you

2

Hello @Daniel19901
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

Let me know if need further assistance
Regards,
Artzen Technologies

3

@Artzen_tech this actually worked! thx a lot! but it created a new problem. Now whenever I add an new section with image (slide or banner) it messes everything us.

I left it like this (with the error), maybe you can take a look ?

thank you in advance!

4

Use this CSS instead of previously shared CSS.

1 Like
5

Hey Artzen_tech

i wanted to have different banners on desktop and mobile, so for that i opened section-banner-image.css and pasted this code to the last line:

.banner__media:first-child {
width: 100%;
}
.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 150% !important;
}
}

And it worked, so i had two different banners on mobile and desktop. The only problem was: it didnt work, if i wanted the banner to stay fixed when scrolled. So i used yout Code from above to fix that in the theme.liquid file. And it worked!

But now is have another problem: now the footer is transparent, and every code i tried didnt fixed it. I dont want the banner to re-appear in the footer. How can i fix that?