Jump to content

Replace section background image with image sized for mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hey team - I'm attempting to code a background image replacement for the first section when the following page is viewed on mobile: https://www.peterzizzo.com/dare-to-suck

I've attempted the following code but I'm afraid I'm not targeting the right section id as I can't get the background image to adjust when viewed in mobile. Could someone please assist? Thanks!

// mobile background replace
section[data-section-id="662817ff05ecb2537fa28cbd"] {
 @media only screen and (max-width:640px){
  .section-background img {
    opacity:0;
  }
 .section-background {
    background-image:url('https://static1.squarespace.com/static/601982cee0432c611d54064e/t/665280a48c8f5d0e8086219c/1716682918770/pete-zizzo-demons-graphic-mobile-animated-2304x4096.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
 }
}

 

Link to comment
  • Replies 2
  • Views 726
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

If you set an effect to section background image, you will need a different code.

section[data-section-id="662817ff05ecb2537fa28cbd"] {
@media screen and (max-width:767px) {
.section-background-canvas.background-fx-canvas {
    display: none;
}
.section-border img {
    visibility: visible !important;
    content: url(https://static1.squarespace.com/static/601982cee0432c611d54064e/t/665280a48c8f5d0e8086219c/1716682918770/pete-zizzo-demons-graphic-mobile-animated-2304x4096.jpg);
}}}

image.png.386859d207c60777afe6e882969f3bd0.png

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.