Jump to content

Different hero image on desktop and mobile

Go to solution Solved by melody495,

Recommended Posts

Posted

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

  • Replies 10
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

@Celeste_Woodside Can you share your website url?

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

Melody | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted

@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 | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted
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

Posted
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 | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

  • 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 | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted
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 | Web Designer & Developer | All things Squarespace
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use: (affiliate links)
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted
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. 🙂

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.