@FluffyKas
Posted
Hey,
It's hard to set general rules, when to embed images in your html and when to apply them as backgrounds. Every image though that adds extra meaning to the content or has a distinct purpose (like being a QR code that needs to be scanned) should be included in the html.
Just think about it. How will a user who can't see the image will know there is an image there, if you set it as a background? There's no alt text, no aria-label, nothing, just an empty div (not sure how that gets announced - if it gets announced - by a screen reader but I'm fairly sure it's not sufficient).
This is something that is easy to forget about so I thought I'd mention. :) I'd definitely include this image in the html. If you struggle to make it responsive, use this code snippet on the image:
display: block;
max-width: 100%;
height: auto;
Apart from this, your solution looks great btw!
Marked as helpful