Images as background-img

Feature Requests / Improvements
1

Hey team,

I’ve seen a lot of elements (galleries, carousel, sliders, etc…) render the images as a CSS background-image of a

instead of using the proper tag (with the possibility to add SEO Alt tag). Is there any reason for that?

Thanks!
Maxime

9 Likes
2

I second this, using background images is really bad practice for a lot of use cases because:

  • not responsive (no srcset)
  • no alt text (accessibility, please!!!)
  • not well handled by lazyload tools

I know it’s a quick shortcut to build cards and use text overlays, but it can easily be done with img tag and absolute positionning :wink:

3 Likes
3

I’d rather see them using the objec-fit:cover property rather than the position:absolute hack :wink:

2 Likes
4

@timmse Yes, I also came across this one today. Due to SEO, background images are not the best way for galleries, because we can’t use SEO alt tags on background image.

Better would be to use NATIVE images and use object-fit …

Please consider this anytime soon! Thank you!

3 Likes
5

True. Due to SEO concerns, I used an image + object fit for my background images.