How do I change homepage background image for only mobile view

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

Hi,

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

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

<style>
@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;
  }

}
  </style>


</style>

Here’s a different method that I use:

https://christyprice.com/squarespace-tips-tricks/show-different-banner-mobile-desktop

@christyprice This worked perfectly! Thank you!!

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

Thanks!

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. 

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

@SnoStudios sorry I don’t have a solution for you. You may want to start a new forum thread so someone with more experience with video can help out.