Jump to content

Different Image for Mobile Screen - Please help

Recommended Posts


I know the subject has been beaten to death and I've read all the posts about how to do this however I still cannot figure out how to add a different image to the background of my mobile website landing screen.  I just need the image at the top in the first section...with the coffee beans to be replaced by an image that will take up the entire viewport vertically when it cuts over to mobile

My page is in development now and has not been published.  What the best way to share with you so you may assist?


Ive attached a photos with the sections names from a chrome extension

Screen Shot 2020-09-09 at 4.24.07 AM.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Add to Home > Design > Custom CSS

/* First section banner mobile */
@media screen and (max-width:767px) {
#page section:first-child .section-background img {
    visibility: hidden;
#page section:first-child .section-background {
    background-image: url(https://cdn.pixabay.com/photo/2020/09/02/15/14/flower-5538547__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.