Jump to content

How can I display two different background images for my home page for desktop and mobile versions?

Go to solution Solved by sayreambrosio,

Recommended Posts

  • Replies 18
  • Views 3k
  • Created
  • Last Reply

Top Posters In This Topic

12 hours ago, Emzzizle said:

I'm making my background image for my homepage on canva but the desktop resolution doesn't work for mobile. 

 

I want to create the background image in two different resolutions so that it can work with both mobile and desktop.

 

TIA

@Emzzizle this may be helpful https://christyprice.com/blog/show-different-banner-mobile-desktop

Link to comment
  • Solution
2 minutes ago, Emzzizle said:

Thanks for your reply, I tried this which works for the desktop version but for mobile you can see both the banners instead of one. 

This will tell you how to hide that extra banner on mobile https://www.thestyledsquare.com/blog-content/hide-elements-in-mobile-view-in-squarespace

Link to comment
  • 1 month later...

Hi - I'm trying to do something similar.  I saw on a different forum topic that you need to add the second image in another section, then put in code to specify which image to use on mobile.  However, I don't want to add another image until I have the CSS to choose the correct one (so it doesn't look weird in the published version.) Can you tell me how to do this if I haven't added the second image yet?  The website is https://www.rivervalleydanceco.org/ 
Thanks! 

Link to comment
On 5/20/2023 at 3:40 AM, rvd said:

Hi - I'm trying to do something similar.  I saw on a different forum topic that you need to add the second image in another section, then put in code to specify which image to use on mobile.  However, I don't want to add another image until I have the CSS to choose the correct one (so it doesn't look weird in the published version.) Can you tell me how to do this if I haven't added the second image yet?  The website is https://www.rivervalleydanceco.org/ 
Thanks! 

Yes. This is possible. Which image are you referring to?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/22/2023 at 10:30 PM, rvd said:

Great!  The second image on the home page, with the green background. 
Thanks

I think no need to use second image. You can add this to Design > Custom CSS to resize image on mobile

@media screen and (max-width:767px) {
[data-section-id="645e7786a7c9826ca2e0ce46"] {
    min-height: unset !important;
    height: 30vh;
}
}

image.png.985f0ba39497c7545b85cfe47afbeb97.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...

Hi there. I am trying to use a different image for my homepage photos on MOBILE versus the one I currently have and like for DESKTOP. The image I have works great for desktop, but as its more landscape, it doesnt work well for mobile - it crops it weirdly. I have a great image to use on mobile, but I want to understand how I can use a different image for mobile homepage/backgrounds than desktop. Thank you. 

Link to comment
On 1/25/2024 at 3:52 AM, PDCROAM said:

Hi there. I am trying to use a different image for my homepage photos on MOBILE versus the one I currently have and like for DESKTOP. The image I have works great for desktop, but as its more landscape, it doesnt work well for mobile - it crops it weirdly. I have a great image to use on mobile, but I want to understand how I can use a different image for mobile homepage/backgrounds than desktop. Thank you. 

I wrote a quick answer to show/hide a section on desktop, mobile, you can check it here. Or you can share link to your site, I can give code to resize image on mobile

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Hello, I have a similar question. On my homepage I have a background image at the top of my page. This works well when viewing the page on a desktop but doesn’t work well on a mobile. Is there a way to remove the background just for the mobile view and add in an image of the same photo just on the mobile view?

Link to comment
On 4/26/2024 at 5:51 AM, beingandbecoming said:

Hello, I have a similar question. On my homepage I have a background image at the top of my page. This works well when viewing the page on a desktop but doesn’t work well on a mobile. Is there a way to remove the background just for the mobile view and add in an image of the same photo just on the mobile view?

If you share link to home page, we can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/29/2024 at 11:35 PM, beingandbecoming said:

www.beingandbecoming.ca

You mean top section on homepage. You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="661c7cc5cdaf9306ac432d44"] .section-border img {
    opacity: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.