rodedo rodedo - 2 months ago 6
CSS Question

Display alternate image

Is it possible to show an alternate image if the original source file is not found?
I would like to achieve this only with css and html, no javascript (or jQuery and alike).
The idea is to still show an image instead of the "alt" test or default (ugly) cross of IE.
If not possible without javascript I will then rather check the img src with php with a basic if-then-else.

Answer

You can do this using the CSS background-image property of the img element, i.e.

img
{
background-image:url('default.png');
}

However, you have to give a width or height for this to work (when the img-src is not found):

img
{
background-image:url('default.png');
width:400px;
}
Comments