responsive background image + /* Smallest image for phone screens */ code example

Example 1: make a background image responsive css

html {
   min-height: 100%;
   background-image: url(image.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

Example 2: background shrinks when responsive

html,
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
}

Example 3: background imge on mobile

/* Desktop-only view.  * Largest mobile view is iPad Pro with 1366 in landscape mode */@media only screen and (min-width:1367px) {  :root {    --bg-image-webp: url('./images/hero.webp');    --bg-image-jpg: url('./images/hero.jpg');    --bg-size: cover;    --bg-pos: center center;  }}/* Large mobile device screens */@media only screen and (max-width:1366px) {  :root {    --bg-image-webp: url('./images/hero.webp');    --bg-image-jpg: url('./images/hero.jpg');    --bg-pos: top center;    --bg-size: 100vw auto;  }}/* Load a smaller image for smaller screens */@media only screen and (max-width:970px) {  :root {    --bg-image-webp: url('./images/hero768.webp');    --bg-image-jpg: url('./images/hero768.jpg');  }}/* Smallest image for phone screens */@media only screen and (max-width:500px) {  :root {    --bg-image-webp: url('./images/hero375.webp');    --bg-image-jpg: url('./images/hero375.jpg');  }}body {  background-color: #fff;  margin: 0px auto;  padding: 0px auto;}.webp body {  background: var(--bg-image-webp) var(--bg-pos) fixed no-repeat;  background-size: var(--bg-size);}.no-webp body {  background: var(--bg-image-jpg) var(--bg-pos) fixed / var(--bg-size) no-repeat;}