Site is currently on development mode

The CSS background-image property as an anti-pattern

Last updated 1 year ago by Andrew Welch


The CSS back­ground-image prop­er­ty allowed us to do some amaz­ing things, but in most cas­es, it’s time to leave it behind.

Many of us have cut our teeth using the CSS back­ground-image prop­er­ty to do a wide vari­ety of things. To many, it’s like an old friend, but it’s one we should con­sid­er say­ing good­bye to.

The real prob­lem isn’t the CSS background-image prop­er­ty itself. Rather it is that it’s been used in places where it real­ly shouldn’t be, such as for the main CTA hero image or for UI images.

Used improp­er­ly, background-image can be an anti-pat­tern. Are there legit use cas­es for background-image? Of course.

How­ev­er, 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.

Read full Article