Jump to content

How do I change homepage background image for only mobile view

Recommended Posts

Site URL: https://www.karmick.net/


I just finished setting up my website (Karmick.net). It looks great on a desktop or tablet, however, on mobile devices the background image on the homepage gets cut off on both edges. How can I change the homepage background image to one that fits mobile screens better, but only on mobile devices?


Thank you in advance for the help!

- Karmick

Karmick.net Desktop View.JPG

Karmick.net Mobile View.png

Link to comment

Hi Karmick,

You can get the new image url and replace the url() in this snippet, add it on home page Settings->Advanced->Custom Code

@media screen and (max-width: 640px) {
  section[data-section-id="5ee8ed2f626a7f2c7562d484"] .section-background img {
   	 opacity: 0 !important;   
  section[data-section-id="5ee8ed2f626a7f2c7562d484"] .section-background {
    background: url(https://images.squarespace-cdn.com/content/v1/5ceec25f5691d500017ce316/1559158088681-WIABL7LERICNYGNY291C/ke17ZwdGBToddI8pDm48kDHPSfPanjkWqhH6pl6g5ph7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0mwONMR1ELp49Lyc52iWr5dNb1QJw9casjKdtTg1_-y4jz4ptJBmI9gQmbjSQnNGng/AdobeStock_1578886_Home_Header_Overlay.jpg?format=2500w);
    background-repeat: no-repeat;
    background-size: cover;




Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 6 months later...

@christyprice After implementing CSS, I ran into a couple small issues I was hoping you could help with.

On my site www.ericsnoza.com I have background videos running on several of my pages. I have mobile versions and desktop versions of the videos. Using your CSS, I created two sections (one version/one mobile). 

The first issue I run into is that on screen rotation the new video will not run/load. It will only display the default background image.

The second issue is that on mobile devices, I am getting white bars on the sides in landscape view, and when I rotate back to portrait view, those white bars crop my video in the background. (see see attached)

I am testing on iPhone X with both Chrome and Safari. Let me know if you need any additional information.



Link to comment

Hi @SnoStudios- do you have the same problems if you aren’t using the css from the post?

Often background videos don’t play on mobile (not a Squarespace specific issue) - a workaround is to use a gif. 

I don’t really use background videos, so maybe someone with more experience can help out with the white bars. 

Link to comment

@christyprice Thank you for your response! 

Yes, this happened even before I inserted your code. Sorry, if I w was not clear on that point. These videos all play, it is only when the page orientation changes to reveal the alternate version of the video, that video does not load.

I was just hoping there was an amendment to the CSS I could add that would force a load/playing of the video of the newly revealed page video.

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.