Jump to content

Different hero image on desktop and mobile

Go to solution Solved by melody495,

Recommended Posts

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');
  }
}
 

Link to comment
  • Replies 10
  • Views 437
  • Created
  • Last Reply

Top Posters In This Topic

@Celeste_Woodside Can you share your website url?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment

@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;
      }
  }
}
 

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
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

Link to comment
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;

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
  • Solution
Posted (edited)
3 hours ago, Celeste_Woodside said:

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

Yep! You want to adjust the background-size to how you want the image to fit that section.

You can try this, this means to set the background to be width=auto, height=100% of the section.

background-size: auto 100%;

You then might want to add this line depending on how you want your image to look

background-position: xxxxxx;

center, top, center top etc... more here https://www.w3schools.com/cssref/pr_background-position.php, but let me know how it goes. 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
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!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
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. 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.