Alex• 3,130
@Alex-Archer-I
Posted
Hey!
Great work, but I really think that you should use img tag here instead of background image. You see, backgrounds good for decorative pictures which doesn't bear any context meanings. And the img have an alt attribute with description for assistive technologies.
To switch images in the different versions you can use picture tag.
<picture>
<source srcset="mobile.jpg" media="(max-width: 900px)">
<img src="desktop.jpg" alt="">
</picture>
It contains one (or more) source tags with different media conditions. If no one of the medias will match, the img would be rendered.
Oh, and also all your media queries have min-width: 1024px. They would be overwrite each other that way =)
Marked as helpful
1
