This is test page for CSS 3 image replacement.

What do browsers do when content: url can’t render an image?

Situations in which the browser can't get an image:

  1. The image doesn't exist on the server (bad path or no such file:

    This text is replaced by non-existent image

    In Opera and Safari, this shows a broken image icon, as if an img tag had a non-existant src attribute.

  2. The URL specified is malformed

    If the address of the image is malformed, Opera and Safari ignore the CSS rule and therefore it doesn't try to replace it, so the content of the element is not replaced.

    The test below attempts to replace the paragraph with a malformed URL:

    This text is replaced by a badly formed URL {content:url(a b 3 45 );}

  3. The user has switched off images, perhaps to save bandwidth

    This lovely baby should be fine.

    In both Opera, this lovely baby picture of me shows a "broken image" icon. In Safari, it shows nothing at all.