HTML & CSS Show one image on phone, and another photo on desktop?

[kieran_mogg]

<img @media only screen and (min-device-width: 400px) src="https://www.gymophobicsfranchise.co...ose-Your-LOCATION-3200-x-1800-px-1024x382.png" style="width:100%; height: auto;"/>
<img @media only screen and (max-device-width: 400px) src="https://www.gymophobicsfranchise.co...N-3200-x-1800-px-3200-x-3200-px-1024x1024.png" style="width:100%; height:auto;"

 

[BGB]

If you want to load different images for different screen than you have to change the media query and than load the image on that screen target.

@media (min-width: 768px) and (max-width: 1024px) {
     .main-img {
          background-image: "your image src"
     }
}

@media (max-width: 767px) {
     .main-img {
          background-image: "your image src"
     }
}