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

Store Design
,
1

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

2

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

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

3

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?

4

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.
5

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

6

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

7

seems like the code from the person has disappered - could you share it? would love to implement it with my store