Replace Unavailable Images via CSS?

Question

Is it possible to replace the standard broken image via CSS or using another technique? All my images are the same size and my have transparency.

I've tried to wrap all images with a div's background:

<div class="no_broken">   <img src="http://www.web.com/found.gif"/> </div>  <div class="no_broken">   <img src="http://www.web.com/notfound.gif"/> </div> 

CSS:

div.no_broken {    background-image: url(standard.gif);  }  div.no_broken, div.no_broken img {    width: 32px;    height: 32px;    display: block;  } 

But this will display two images on top of each other if the IMG is transparent.

Answer 1

This works without CSS:

<img src="some.jpg" onerror="this.src='alternative.jpg';"> 

It seems to even work when Javascript is disabled.

Answer 2

Yes, you can replace an image with CSS, using a trick of pseudo selectors.

Basically, ::before and ::after only apply when the image fails to load. You can use absolute positioning to place the CSS pseudo element over the broken image placeholder:

img {      position: relative;      width: 200px;      height: 200px;      display: inline-block;      vertical-align: text-bottom;  }        img::before {          content: 'fall back';          position: absolute;          top: 0;          left: 0;          bottom: 0;          right: 0;          line-height: 200px;          background-color: #fd0;          color: currentColor;          text-align: center;          border-radius: 2px;          display: block;          width: 200px;          height: 200px;          overflow: hidden;      }

<img src="not-found">  <img src="https://via.placeholder.com/200">

This snippet works with no JS at all, but only works in newer browsers.