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

How do I change homepage background image for only mobile view


Karmick

Question

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

Karmick.net Desktop View.JPG

Karmick.net Mobile View.png

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Here’s a different method that I use: https://christyprice.com/squarespace-tips-tricks/show-different-banner-mobile-desktop

Posted Images

2 answers to this question

Recommended Posts

  • 0

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>

image.png.efb6643c076f58a7171950c17cca1043.png

Greeting, it's BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post

Create an account or sign in to comment

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


×
×
  • Create New...