Jump to content

How to use a different background image on mobile in Squarespace with new section divider feature

Recommended Posts

Password: appleton

I am attempting to use a different background image in the top main header on mobile. You can see the image is in place (the small sliver below the curved divider and above the red section) - but it is behind the image I want to swap (and not housed within the curve).

This is the CSS I am using:

@media only screen and (max-width: 640px)
 {section[data-section-id="6477887b2644316cd6cb8ff4"] {
background-image: url(https://static1.squarespace.com/static/6474e7fbb738031c56c23939/t/6490c63a6ca0e13bf8787392/1687209531282/Appleton+Home+Page+Banner+-+Mobile+test.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Thanks in advance!

Screenshot 2023-06-21 at 11.35.25 AM.png

Edited by m10ki
Link to comment
  • Replies 4
  • Views 320
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Use this new code

@media only screen and (max-width: 640px) {
    section[data-section-id="6477887b2644316cd6cb8ff4"] .section-background-canvas.background-fx-canvas {
    display: none;
}
section[data-section-id="6477887b2644316cd6cb8ff4"]  img {
    visibility: visible !important;
    content: url(https://static1.squarespace.com/static/6474e7fbb738031c56c23939/t/6490c63a6ca0e13bf8787392/1687209531282/Appleton+Home+Page+Banner+-+Mobile+test.png);
}
section[data-section-id="6477887b2644316cd6cb8ff4"] {
    min-height: unset !important;
    height: 50vh;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.