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

7 answers to this question

Recommended Posts

  • 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

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

Create an account or sign in to comment

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


×
×
  • Create New...