[SOLVED] Display alternate image

Issue

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.

Solution

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;
}

Answered By – emrea

Answer Checked By – Senaida (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *