Different hero image on desktop and mobile

Hi! I am trying to display a different image on the homepage hero and the mobile version. I used the following code but the mobile version is not updated to the new image. I would appreciate any help!!

 

/* For desktop */
@media only screen and (min-width: 768px) {
  [data-section-id="65d4ca134ce2a875379c1beb"] {
    background-image: url('https://static1.squarespace.com/static/65d4ca0c46c2917ff76edeb1/t/662a52711697c27d2993db54/1714049654921/6F4A7456.jpg');
  }
}

/* For mobile */
@media only screen and (max-width: 767px) {
  [data-section-id="65d4ca134ce2a875379c1beb"] {
    background-image: url('https://static1.squarespace.com/static/65d4ca0c46c2917ff76edeb1/t/662a52d238ae740acc2997cd/1714049750968/6F4A7446.jpg');
  }
}
 

@Celeste_Woodside Can you share your website url?

On 4/25/2024 at 11:22 AM, melody495 said:

@Celeste_Woodside Can you share your website url?

It is https://www.alonasharon.com

Thank you!

@Celeste_Woodside the background image is already set in Squarespace, so you can just change the image for mobile. Don't need the For Desktop code.

Try replacing your code with the below. Let me know how it goes.

/* For mobile */
@media only screen and (max-width: 767px) {
  [data-section-id="65d4ca134ce2a875379c1beb"] {
      .section-background img {
          display:none;
      }    
      .section-background {
          background-image: url('https://static1.squarespace.com/static/65d4ca0c46c2917ff76edeb1/t/662a52d238ae740acc2997cd/1714049750968/6F4A7446.jpg');
          background-size:100%;
          background-repeat: no-repeat;
      }
  }
}
 

1 hour ago, melody495 said:

@Celeste_Woodside the background image is already set in Squarespace, so you can just change the image for mobile. Don't need the For Desktop code.

Try replacing your code with the below. Let me know how it goes.

/* For mobile */
@media only screen and (max-width: 767px) {
  [data-section-id="65d4ca134ce2a875379c1beb"] {
      .section-background img {
          display:none;
      }    
      .section-background {
          background-image: url('https://static1.squarespace.com/static/65d4ca0c46c2917ff76edeb1/t/662a52d238ae740acc2997cd/1714049750968/6F4A7446.jpg');
          background-size:100%;
          background-repeat: no-repeat;
      }
  }
}
 

 

Thank you! I just tried this and no change on mobile..... @melody495

Just now, Celeste_Woodside said:

Thank you! I just tried this and no change on mobile..... @melody495

Try adding !important.

So change this line to below

display:none!important;

Thank you @melody495!!! We are getting somewhere! However, the photo is not filling the header....  Any ideas here?

Perfection! Thank you so much @melody495

15 minutes ago, Celeste_Woodside said:

Perfection! Thank you so much @melody495

You are very welcome! Glad that worked.

I would like to correct my above post though, you probably want the below. This means width = auto, height = 100%, so it would fill the section height with the photo then the photo's width is kept to the aspect ratio.

background-size: auto 100%;

The 100vh would stretch the image to fill the height of the device screen, rather than the section. You might have noticed the image looks "zoomed in" with 100vh.

Sorry, I didn't catch it as I was typing before!

4 hours ago, melody495 said:

You are very welcome! Glad that worked.

I would like to correct my above post though, you probably want the below. This means width = auto, height = 100%, so it would fill the section height with the photo then the photo's width is kept to the aspect ratio.

background-size: auto 100%;

The 100vh would stretch the image to fill the height of the device screen, rather than the section. You might have noticed the image looks "zoomed in" with 100vh.

Sorry, I didn't catch it as I was typing before!

Ah! Thank you! That is way better. 🙂