Styling broken images

Broken images css3

Today, I am going to show how to style the default view of the tag with a broken image. We can use only CSS to improve this experience.

Facts about tag

To understand how we can style broken images, it's important to know this two things:

  1. We can apply regular typography styling to tag. These styles will be applied to the alternate text (alt). In the case of a with a not broken image, the typography style will be ignored.
  2. The tag is a replaced element. Because of that, the pseudo elements will not work when the image is loaded. However, if it has a broken image, this pseudo elements will appear.

A practical example

Let's put a broken image at first.

    <img src="http://marioaraque.com/brokenimage.src" alt="Broken image"> 

Then, add the following styles:

img { 
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2; 
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

The result looks like this:

Broken image

Replacing the default alternative text

A good hack to replace the default alternative text is using pseudo elements and positioning the text on top of the alt text.
Let's see an example:

img { 
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2; 
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

This is the result:

screen_shot_2016-04-23_at_12.17.23.png

Extra styling

We can add more styling using the pseudo elements.

img { 
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2; 
  text-align: center;
  min-height: 50px;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after { 
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

Here is the final result:

Browser support

Unfortunately, not all browsers support this feature. In some cases, the pseudo elements are not displayed because the final image is not displayed. Also in Opera Mini and Safari, the font property is not applied. However, I think it is a very interesting approach to improve the experience and style of broken images.