Shopify Expert Insights

Let's say you want to load a background image for desktops, but not on smartphones.

You could conditionally load the background images on devices that are not smartphones. With a single media query.

1
2
3
4
5
6

body { background: #fefefe; }

/*  If not a smartphone, then load background image */
@media only screen and (min-width : 321px) {
	html { background: url("bg.jpg") no-repeat center top; }
}

You could also change the width wider to account for devices in landscape mode.