How can I make my desktop image parallax with CSS (Dawn Theme)

[PourStudios]

How can I make my desktop image parallax? I'm using the Dawn theme and very new to Shopify. I tried fixing the background using the button, but that messed up the banner. How can I do it with CSS and where do I need to put the code? 

https://d4a48f-29.myshopify.com/
raobai

[theycallmemakka]

Hi @PourStudios 

I have written a plain CSS to achieve this. This is a static code. If this is what you are looking for, you can also make it dynamic by making changes to the banner component.
Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>


#shopify-section-template--17694654103811__image_banner .banner__media.media.banner__media-half.scroll-trigger.animate--fade-in {
        background-image: url(//d4a48f-29.myshopify.com/cdn/shop/files/Studios_Design_2.png?v=1711867160&width=3840);
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
}

#shopify-section-template--17694654103811__image_banner img.banner__media-image-half {
    display: none!important;
    opacity: 0.5;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[PourStudios]

This worked on desktop, but the mobile image should be another image that I have uploaded and shouldn't be parallax. How can I keep only this on desktop and have a different static image on mobile? 

[theycallmemakka · Accepted solution]

This code should make it responsive and display it for mobile device. You can just change the URL in background-image and it will be displayed for desktop.

<style>


@media only screen and (min-width: 600px) {
  #shopify-section-template--17694654103811__image_banner .banner__media.media.banner__media-half.scroll-trigger.animate--fade-in {
        background-image: url(//d4a48f-29.myshopify.com/cdn/shop/files/Studios_Design_2.png?v=1711867160&width=3840);
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
}

#shopify-section-template--17694654103811__image_banner img.banner__media-image-half {
    display: none!important;
    opacity: 0.5;
}
}

</style>

[PourStudios]

THANK YOU SO MUCH! I have been at this for a week now! 

[artofanoop]

Hi @theycallmemakka  I see that this is an acceptable solution. But unfortunately it's not working for me.

I need to have a parallax banner area for desktop and mobile view alike. How do I achieve that?
Can you please help me?

Thanks in advance