Can I have a different background image for mobile version of site?

Hi Jeff,

The background image and related CSS properties the home page currently has (at desktop sizes) are:

.collection-type-template-page #outerWrapper  {  background-image: url("http://static1.squarespace.com/static/560d7230e4b0a4c7e9582606/t/560e9ee2e4b01316733a433f/1443798754915/sitebghome.jpg");  background-position: center center;  background-size: cover;  background-attachment: fixed;  background-repeat: no-repeat;}

For an explanation of what the various background properties mean and do, see the w3schools' article CSS Background and the MDN article background.

You must have uploaded the current background image to Squarespace. If you don't want to do the same again with another image but want instead to use an image off the web, just substitute the url to your new image for the current url (http://static1.squarespace....) and put the CSS in Design > Custom CSS. You needn't put all the background property declarations in Custom CSS, just the ones you modify.

If at first it seems not to work, add !important to the individual declarations. Thus, e.g., background-size: cover !important;.

Whatever declarations you change, you will need to enclose them all in a media query. Thus:

@media only screen and (max-width: 640px) {  .collection-type-template-page #outerWrapper  {    /* property declarations here */  }} 

I hope this answers your question. If not, let me know. Edited October 4, 2015 by alxfyv

For most community members to help, you need to give the url to your site.

Sorry. My URL is http://www.jeffmarknyc.comThanks.

Edited October 4, 2015 by jeffreymark

Hi Steve:

Thank you. This worked perfectly for changing the home page image for the mobile site. Can I change the other pages of the site with the same code? When I go in to view each page it looks like the custom CSS code is in there but the other pages of the mobile site are still displaying the same image as on the regular site. Thanks again.

In this case the CSS selector .collection-type-template-page selects the home page. To get the CSS to apply to all the pages, omit that selector. The first line of the CSS rule should be simply #outerWrapper {.

Try that and see if it does what you want. Let me know.

@alxfyv Is this possible to do with the Foster template? My hero image on the home page isn't working on the mobile version and I can't figure out how to have it scale down (which would be ideal). Is there coding I can use to either get the entire image to show on mobile or to use a different image in the mobile version of the site? The website url is thebodyrestorationstudio-work.squarespace.com

Thank you!

Hi @alxfyv

i'm referring to your 5 years old post below. I need to do exactly the same as @jeffreymark but can't make it work on my Brine template. (It's a client website i'm working on so i can't share the website address, it's not live yet).

I followed your instructions and add this exact peace of code in the css properties :

@media only screen and (max-width: 640px) { .collection-type-template-page #outerWrapper  { background-image: url("https://static1.squarespace.com/static/5d94a9d780be461d94a3a7c6/t/5e218fddbb909c4a01c07e26/1579257826981/ImmeubleTLH_exterieur_versionfoncee_formatweb_V2.jpg"); background-size: cover !important; 
  }}

Did i miss something ?

Thank's in advance for your help !

 

Julien

On 10/4/2015 at 4:08 PM, alxfyv said:

 

 

 

Hi Jeff,

The background image and related CSS properties the home page currently has (at desktop sizes) are:

.collection-type-template-page #outerWrapper  {  background-image: url("http://static1.squarespace.com/static/560d7230e4b0a4c7e9582606/t/560e9ee2e4b01316733a433f/1443798754915/sitebghome.jpg");  background-position: center center;  background-size: cover;  background-attachment: fixed;  background-repeat: no-repeat;}

 

 

For an explanation of what the various background properties mean and do, see the w3schools' article CSS Background and the MDN article background.

You must have uploaded the current background image to Squarespace. If you don't want to do the same again with another image but want instead to use an image off the web, just substitute the url to your new image for the current url (http://static1.squarespace....) and put the CSS in Design > Custom CSS. You needn't put all the background property declarations in Custom CSS, just the ones you modify.

If at first it seems not to work, add !important to the individual declarations. Thus, e.g., background-size: cover !important;.

Whatever declarations you change, you will need to enclose them all in a media query. Thus:

@media only screen and (max-width: 640px) {  .collection-type-template-page #outerWrapper  {    /* property declarations here */  }} 

 

 

I hope this answers your question. If not, let me know.

 

Hello, 

 

Could someone please help me with this same issue for a site I am developing. 

The site is: https://www.ehi-ceramics.com/

 

I would like the background image and the logo on the home page to sit in the centre of the ceramic bowl on MOBILE, as it does already on DESKTOP. Please see screen shots attached of how it is currently. 

 

Any help much appreciated.

 

 

34 minutes ago, dianarosesquarespace said:

Hello, 

 

Could someone please help me with this same issue for a site I am developing. 

The site is: https://www.ehi-ceramics.com/

 

I would like the background image and the logo on the home page to sit in the centre of the ceramic bowl on MOBILE, as it does already on DESKTOP. Please see screen shots attached of how it is currently. 

 

Any help much appreciated.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page .section-background img {
    object-position: 50% 46% !Important;
}
}

 

22 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page .section-background img {
    object-position: 50% 46% !Important;
}
}

 

Wow thank you so much! this is perfect !

On 9/3/2020 at 3:27 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page .section-background img {
    object-position: 50% 46% !Important;
}
}

 

Hello again,

I was wondering if you know code for keeping the logo the same size (relative to the plate) on the mobile version as it is on the desktop? 

At the moment it goes much bigger..

Any suggestions much appreciated 🙂