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

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

Hi,
you can use two images on desktop and mobile different devices with CSS code.
please share the website URL.

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

On 3/21/2023 at 4:11 PM, sunnyvermatech said:

Hi,
you can use two images on desktop and mobile different devices with CSS code.
please share the website URL.

It's www.emilychoi.co.nz

On 3/22/2023 at 2:37 AM, sayreambrosio said:

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

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. 

23 minutes ago, sayreambrosio said:

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

This worked perfect! Thank you so much.

8 minutes ago, Emzzizle said:

This worked perfect! Thank you so much.

You are very welcome 🙂

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! 

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?

13 hours ago, tuanphan said:

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

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

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

That looks great!  Thanks so much!

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. 

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

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?

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

www.beingandbecoming.ca

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

I need help as well. - How can I display two different background images for my home page for desktop and mobile versions? - 

I want to create the background image in two different photos (mobile crops my background).

My site is www.clarencetilton.com

Thanks!

On 6/28/2024 at 3:36 AM, alexmw101 said:

I need help as well. - How can I display two different background images for my home page for desktop and mobile versions? - 

I want to create the background image in two different photos (mobile crops my background).

My site is www.clarencetilton.com

Thanks!

If you need, we can use code to resize it on mobile.

If you still want to use 2 different images, you can follow this.