How to set a CSS background-image fallback

DanielJanuary 10, 2023January 13, 2023

Let's say we have the following CSS background-image declaration:

div {
  background-image: url('my_image');
  width: 200px;
  height: 100px;
  background-size: 100%;
}

For some reason, the url('my_image') image may not be available sometimes. We want to be able to provide a fallback option for the background-image property.

While for the plain HTML images, we can set a fallback via the onerror attribute, we don't yet have something like this for the CSS background image.

However, we can simulate this by using multiple background images in CSS:

div {
  background-image: url('image_not_exist'), url('https://img.freepik.com/free-photo/card-soft-template-paper-report_1258-167.jpg');
  width: 200px;
  height: 100px;
  background-size: 100%;
  background-repeat: no-repeat;
}

Checkout the full codepen example below:

All the major browsers support multiple background images in CSS.

As a closing thought, we can use also the CSS @supports rule to provide background images fallbacks.