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

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


jeffreymark

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
Link to comment
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

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

Link to comment
  • 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.

Link to comment
  • 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.

Link to comment
  • 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.

Link to comment
  • 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!

Link to comment
  • 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.

 

Link to comment
  • 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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment
  • 0
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!

Edited by bcpfc
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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. 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...