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.

 @media only screen and (max-width:640px){
  #page .page-section:nth-child(1) .section-background img {
  #page .page-section:nth-child(1) .section-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;



any help would be greately appreaciated. thanks, Ryan 🙂

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 2 months later...

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.