Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jeffreymark

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

Question

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.

Edited by pvo

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0

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


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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 by alxfyv

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.


I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Share this post


Link to post
  • 0

@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!

Share this post


Link to post
  • 0

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.

 

Share this post


Link to post
  • 0

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.

 

 

WhatsApp Image 2020-07-28 at 16.02.00.jpeg

WhatsApp Image 2020-07-28 at 16.02.03.jpeg

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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 🙂

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...