Home/ Questions/Q 6701905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:59:23+00:00

Okay, let’s say you have something like this: <span class=image style=background-image: url(‘http://www.example.com/images/image1.png’)></span> Every CSS

  • 0

Okay, let’s say you have something like this:

<span class="image" style="background-image: url('http://www.example.com/images/image1.png')"></span>

Every CSS tutorial I’ve ever read has covered the concept of using a background color after the background-image code, which of course takes the place of the image when one is unavailable, but…

How do you specify a backup background-image – one that should be displayed if the image referenced is unavailable? If there’s no CSS trick for this, maybe JavaScript could handle it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Simple answer:

    You could either nest the span inside another span – with the outer span set to use the backup background image. If the inside span’s background isn’t available, then you’ll see the outside one’s

    Better, more difficult answer:

    You could achieve a similar result in pure CSS, by adding some psuedo content before the span, and then styling that to have the fallback background. However, this usually takes some trial and error to get it right;

    Something lile

    span.image:before{content:" "; background:url(backup.png); display: block; position:absolute;}
    • 0