Different Desktop & mobile views

I have a customer after a custom mobile view for their home page.
They want have a totally different background image loaded. Is this possible somehow? I would love some ideas and a solution and happy to work with a third party contractor if needed.

Cheers,

Brent

You can add 2 background image, then we can give code to show 1 on desktop, show 1 on mobile.

I found this site: https://www.powershop.co.nz/

They have a div stretched to full screen and use css to change the background image at different break points. I think this will be a simple solution 🙂

If you want this, you can use this CSS

/* new section background mobile */
@media screen and (max-width:767px) {
	[data-section-id="enter section id here"] {
		background-image: url(https://cdn.pixabay.com/photo/2015/07/09/23/09/cadaques-838724__340.jpg);
		background-size: cover;
		background-repeat: no-repeat;
}
}

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

(This code for SS 7.1. With 7.0, you need to share site url)

If it helps, I've found the easiest way is to add 2 sections and hide one on desktop and one on mobile:

/*remove section on desktop only*/
@media screen and (min-width:780px) {
section[data-section-id="xxxxx"]{
    display: none !important;
}
}
/*remove section on mobile only*/
@media screen and (max-width:781px) {
section[data-section-id="xxxxx"] {
    display: none !important;
}
}