how to make a background image for mobile code example
Example: background imge on mobile
@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; }}@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; }}@media only screen and (max-width:970px) { :root { --bg-image-webp: url('./images/hero768.webp'); --bg-image-jpg: url('./images/hero768.jpg'); }}@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;}