The CSS background-image property as an anti-pattern

Andrew Welch:

There are some seri­ous down­sides to using the CSS background-image prop­er­ty, and more impor­tant­ly, we have bet­ter ways to imple­ment images in our browsers today. Time is now to ditch background-image from your toolset and use <picture> tag instead.

Old way:

1
2
3
<div style="background-image: url('/some/man-with-a-dog.jpg'); 
            background-size: cover;">
</div>

New Way:

1
2
3
4
5
<picture>
  <img src="/some/man-with-a-dog.jpg"
       alt="Man with a dog"
       style="object-fit: cover;" />
</picture>

0 Comments