Dawn theme, image banner with one image on mobile with fixed background positions

Store Design
, ,
1

Hello, has anyone encountered this issue before?

The main page of my website features image banners with animations set as fixed background positions. I need two pictures on the main screen and one on the mobile, but due to animations ( fixed background positions), the code I’m using isn’t functioning properly.

So, my question is: does anyone have a solution? I want to keep everything else the same but add code that will correctly display just one picture from the banner on the mobile version.

I have Dawn theme

Thank you

2 Likes
2

Hello @DIWEBDESIGNER

You can use CSS media queries to adjust the background images based on screen size.

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>add this code at the bottom of the file.

  • For desktop view *
@media only screen and (min-width: 768px) {
.banner-section {
   background-image: url('desktop-banner-image.jpg'); 
   background-attachment: fixed; 
}
}
  • For mobile view *
@media only screen and (max-width: 767px) {
.banner-section {
   background-image: url('mobile-banner-image.jpg');
   background-attachment: scroll; 
}
3

Thank you, but unfortunately, it does not change anything.

4

:white_check_mark: Step 1: Add a Unique Class to Your Banner

In Dawn theme, go to Online Store → Themes → Edit code → Sections → banner.liquid (or whichever section your banner is in).
Find the div for your banner and give it a custom class, e.g.:

<div class="custom-banner"></div>

:white_check_mark: Step 2: Add CSS for Desktop vs. Mobile

Go to Assets → base.css (or theme.css) and add this code at the bottom:

/* Default: Desktop - two images */
.custom-banner {
  background-image: url("your-desktop-image1.jpg"), url("your-desktop-image2.jpg");
  background-position: center, center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover, cover;
  height: 100vh; /* adjust as needed */
}

/* Mobile: Only one image */
@media (max-width: 768px) {
  .custom-banner {
    background-image: url("your-mobile-image.jpg");
    background-attachment: scroll; /* fixed often breaks on mobile */
    background-size: cover;
    background-position: center;
  }
}

:white_check_mark: Step 3: Replace Image Links

Change:

  • "your-desktop-image1.jpg" → first desktop banner

  • "your-desktop-image2.jpg" → second desktop banner

  • "your-mobile-image.jpg" → mobile-only banner

:high_voltage: Important Notes:

  1. Fixed backgrounds don’t work well on mobile Safari (iOS). That’s why I added background-attachment: scroll in mobile. Otherwise, the banner will look broken.

  2. If you need animation effects, you might need to use CSS keyframes or JavaScript instead of relying on background-attachment: fixed.

  3. Always test in multiple devices (iOS, Android, Desktop) since Shopify themes behave differently depending on the browser.