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

Replace background image on mobile

Question

I'd like to replace the background header image with one that is designed to fit a vertical layout when site is viewed on mobile. Ideally text and icon sit above the person in the image, rather than to the side like they do for larger displays.

site is https://icosahedron-rust-5y3f.squarespace.com/
password: 2020

The image below is the one I'd like to use for mobile. I can adjust image size/dimensions if needed.
header-physician-smiling-vert.jpg

Any help greatly appreciated!

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

The easiest way is insert 2 images. Then use code to hide Mobile Image on Desktop, hide Desktop Image on Mobile.

You can do that, then share url again. Members on forum will help you.


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
Posted (edited)

Thanks for the quick reply!

But I'm not sure how to upload 2 images. Right now I have one image set as the block background. I'd like to replace it with a media query.

If I could upload 2 background images, it should be easy to hide them as needed, but I don't see an option to load second image.

Edited by AFDesign

Share this post


Link to post
  • 0

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage article section:first-child img {
    object-position: 90% 10% !important;
}
.homepage article section:first-child {
    padding-top: 0 !important;
}
}

 


COVID-19: Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

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