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
  • Views 309
  • Created
  • Last Reply

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

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

Link to comment


This topic is now archived and is closed to further replies.

  • 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.