Celeste_Woodside Posted April 25 Posted April 25 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'); } }
melody495 Posted April 25 Posted April 25 @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)
Celeste_Woodside Posted April 29 Author Posted April 29 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!
melody495 Posted April 29 Posted April 29 @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)
Celeste_Woodside Posted April 29 Author Posted April 29 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
melody495 Posted April 29 Posted April 29 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)
Celeste_Woodside Posted April 29 Author Posted April 29 Thank you @melody495!!! We are getting somewhere! However, the photo is not filling the header.... Any ideas here?
Solution melody495 Posted April 29 Solution Posted April 29 (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 April 29 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)
melody495 Posted April 29 Posted April 29 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)
Celeste_Woodside Posted April 30 Author Posted April 30 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. 🙂 melody495 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment