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:
- 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.
- 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:
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:
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.