Jump to content

Different background image for mobile and desktop sites

Recommended Posts

Hi there,

I am very new to this and have started editing a website before it goes live (still in private mode). 
I have an image for a desktop homepage but I would like to use a different one entirely for the mobile site so both images are optimised for there uses. I've tried doing this using the code below but because I am css illiterate I've definately done something wrong or don't know how to execute this: 
I should mention I have the 'Personal Plan' so not even sure this is possible on my pricing plan.

#collection641d0a0bcf5c9a4e1bcf01cd{
 @media only screen and (max-width:640px){
  #page .page-section:nth-child(1) .section-background img {
    opacity:0;
  }
  #page .page-section:nth-child(1) .section-background {
    background-image:url('https://static1.squarespace.com/static/641d0a012778260787f58e9f/t/64262a63c2164f7747509f3c/1680222828133/mobile+background+final.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
 }
}

 

 

any help would be greately appreaciated. thanks, Ryan 🙂

Link to comment
  • Replies 4
  • Views 269
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 months later...

Hi Tuanphan,

Sorry I thought I resolved this but am still having issues. 

I have an image for the desktop homepage but I would like to use a different one for the mobile site (different size) so both images are optimised for the screen size. Is there a way to do this please?

in the attachment for the mobile view I would like to be able to view the entire ring similar to the desktop view.

desktip view.JPG

mobile view.JPG

Edited by stmay
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.