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

I am trying to have a different background image for the mobile version of my site. I am using the encore template. I see the following code posted for the same question:

@media only screen and (max-width: 640px) { .site-wapper { background-image: url(http://urlToImage/image.png); background-repeat: repeat repeat; }}

I tried adding this to the custom css but it had no effect. I really only need the home page image to change if there is an easier fix.

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

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

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.

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 🙂

On 9/3/2020 at 7:27 AM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Hey there! I tried this code with a bit of modification for my site under Design >> Custom CSS: 

Quote

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

and it worked like a charm for the image I wanted to shift over on one of my pages (page is named "services".) However, it also shifted every other section background image on the site on other pages as well! Is there something I can add to specify that I'd only like it to affect one specific image which I have uploaded to my site? Thanks!

16 hours ago, bcpfc said:

Hey there! I tried this code with a bit of modification for my site under Design >> Custom CSS: 

and it worked like a charm for the image I wanted to shift over on one of my pages (page is named "services".) However, it also shifted every other section background image on the site on other pages as well! Is there something I can add to specify that I'd only like it to affect one specific image which I have uploaded to my site? Thanks!

Can you share link to page where you want apply the code?

On 4/29/2021 at 7:49 AM, tuanphan said:

Can you share link to page where you want apply the code?

Oh man, I'm sorry I didn't realize that you'd replied to this! Thank you. I am still trying to figure out this issue. What I really need is a piece of code that I can use to align specific individual section background images differently from each other, on any page of the site.

The page that shows this issue the most is backcountrypilates.com/services . I'm happy with everything on desktop, but on mobile the first photo needs to show primarily the left side of the photo, the second one is fine, and the third one down the page needs to show a little more of the right side. Unfortunately, a "one alignment fits all" option is not really working for me. 

On 5/27/2021 at 11:41 AM, bcpfc said:

Oh man, I'm sorry I didn't realize that you'd replied to this! Thank you. I am still trying to figure out this issue. What I really need is a piece of code that I can use to align specific individual section background images differently from each other, on any page of the site.

The page that shows this issue the most is backcountrypilates.com/services . I'm happy with everything on desktop, but on mobile the first photo needs to show primarily the left side of the photo, the second one is fine, and the third one down the page needs to show a little more of the right side. Unfortunately, a "one alignment fits all" option is not really working for me. 

Add to Design > Custom CSS

/* Mobile-Services-Top banner */
@media screen and (max-width:767px) {
[data-section-id="6062c999acbfe82c7197caa9"] img {
    object-position: 30% !important;
}
}

 

Thank you so much, the top photo is right where I'd like it now! Really appreciate the help.