Jump to content

Replacing background image with a mobile image

Recommended Posts

Hi all

I'm trying to replace the background image in my home page hero section with a specific mobile image. The CSS code I used previously was working but for some reason it isn't anymore. 

The mobile image is displaying, but the desktop image is still visible above it (see attached)

Can anyone help? This is the code I'm currently using:


@media only screen and (max-width:767px) {
    section[data-section-id="649c497cc96191197781d2c2"] .section-background-content {
        display: none;
    }
    section[data-section-id="649c497cc96191197781d2c2"] .section-background {
        background-image: url("https://images.squarespace-cdn.com/content/649c4974564aa84f6336f070/528a0fde-ceaf-42ee-a36f-915fa2a3ed24/wag-wall-main-final-mobile.png?content-type=image%2Fpng") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

Screenshot 2024-05-03 at 11.00.49.png

Link to comment
3 hours ago, Waggit said:

The mobile image is displaying, but the desktop image is still visible above it (see attached)

Can anyone help? This is the code I'm currently using:

@media only screen and (max-width:767px) {
    section[data-section-id="649c497cc96191197781d2c2"] .section-background-content {
        display: none;
    }
}

Hi @Waggit can't tell without a url, but if you're still seeing the desktop image, then this line (display: none) isn't being used.

Likely the CSS selector has changed. Check that this element still exists in your site .section-background-content.

Depending on the version/your site, it could be .section-background img.

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

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
  • 1 month later...

Hi Melody

Sorry for the extremely slow response, I'd forgotten all about this. I've tried to solve it but I haven't had much luck.

I'm not a developer so I'm unsure how to fix or check - site .section-background-content.

This is my web address: https://www.madebywag.com/

Would it help if I gave you backend access?

Thanks so much for your help with this

Wag

Link to comment

Hi @Waggit try replacing your code with the below. I replaced the CSS selector ".section-background-content" with ".section-background img".

@media only screen and (max-width:767px) {
    section[data-section-id="649c497cc96191197781d2c2"] .section-background img {
        display: none;
    }

But I am not sure what you expect to see in terms of mobile and desktop version. Seems like the background image you've set within Squarespace is the same image you've set in the CSS code?

Let me know how it goes, and if we can help further.

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

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
  • 2 weeks later...

Hi Melody 

Unfortunately, it's still not working. The desktop image is still displaying over the top of the mobile image on mobile devices.

The image I want to display on mobile is a smaller version of the desktop version. It looks the same, but it's just a lot smaller (my head isn't as big). This is the mobile image I want to display - png

 

This is the CSS code I'm currently using:

@media only screen and (max-width: 767px) {
    section[data-section-id="649c497cc96191197781d2c2"] .section-background-content {
        display: none !important;
    }

    section[data-section-id="649c497cc96191197781d2c2"] .section-background::before {
        content: "";
        display: block;
        background-image: url("https://images.squarespace-cdn.com/content/649c4974564aa84f6336f070/528a0fde-ceaf-42ee-a36f-915fa2a3ed24/wag-wall-main-final-mobile.png?content-type=image%2Fpng") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}

 

Link to comment

@Waggit Hi! Try adding this code under Website > pages > Website Tools > Custom CSS

@media only screen and (max-width: 767px){
section[data-section-id="649c497cc96191197781d2c2"] .section-background img {
    opacity: 0 !important;
}
section[data-section-id="649c497cc96191197781d2c2"] .section-background {
    background-image: url('https://images.squarespace-cdn.com/content/649c4974564aa84f6336f070/528a0fde-ceaf-42ee-a36f-915fa2a3ed24/wag-wall-main-final-mobile.png?content-type=image/png') !important;
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
}

Let me know how it goes. BTW, your site looks amazing!

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.