<!DOCTYPE html>
<html>
<head>
<title>Resized and Responsive Background Image</title>
<style>
/* For width smaller than 500px: */
body {
background-repeat: no-repeat;
background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
}
/* For width 500px and larger: */
@media only screen and (min-width: 500px) {
body {
background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg");
}
}
p {
margin-top: 220px;
}
</style>
</head>
<body>
<p>
Resize the browser width and the background image will change at 500px. To see the effect clearly, toggle device toolbar and have mobile view.
</p>
</body>
</html>