Dima Prohorenko

Posted on Feb 26, 2021 • Edited on Feb 28, 2021

How to style broken images with css

#webdev #css #html

Broken images are ugly, but we can style them to provide a better user experience.
Here's what we'll be creating today:

But before we begin let's take a closer look at how images behave.

1. We can apply typography styles to images.

They will be applied to the alternative elements.

2. You can use pseudo-elements on broken images.

Typically ::before and ::after elements won't work on images, however, when image is not loaded this elements can appear.

Let's get to the interesting part.

Create an image tag and set a broken url and an alt attribute.



<img src="https://imag.unsplash.com/photo-1509021436665-8f07dbf5bf1d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" alt="Good book">

This is what we get in the browser:

Apply styles for the image element itself.



img {
     display: inline-block;
     font-family: Arial, sans-serif;
     font-weight: 300;
     line-height: 2;
     text-align: center;

     min-width: 300px;
     min-height: 50px;
     position: relative;
}

Add ::before element to create a background for the broken image



img::before {
     content: '';
     width: 100%;
     height: calc(100% + 10px);
     background-color: #ccc;
     border-radius: 10px;
     position: absolute;
     top: 50%;
     left: -2px;
     transform: translateY(-50%);
 }

Here's what browser renders

After this add ::after element to create text and icon.



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

     font-size: 18px;
     color: rgb(100, 100, 100);

     display: block;
     position: absolute;
     z-index: 2;
     top: 5px;
     left: 0;
     width: 100%;
     height: 100%;
}

Final output

Also in order to use html symbols inside a pseudo-element you have to first get the symbol number and then convert it to Hexdecimal value. Here's a nice tutorial on achieving this.

Top comments (35)

Krishan111 • Feb 27 '21

@sasscrafter will doing this affect seo?

Jakub Pomykała • Mar 12 '21

I don't think so, the HTML stays the same. You are just styling it :)

Dima Prohorenko • Feb 27 '21

Hi, I don’t think so

Fettah Aud • Feb 28 '21

You cannot use peusedo elements with img tag

Dima Prohorenko • Feb 28 '21

Yep, but you can use them on broken images. So if images is fine pseudo elements won’t show up and if img is broken then they will be applied.

Charanjit Chana • Mar 17 '21

I'm sure I'm not the only person to try pseudo-elements with images only to find they're not supported! I had no idea that changed for broken images.

Sadly, no support in Safari for this though 😞

Dima Prohorenko • Mar 17 '21

😔

Fettah Aud • Feb 28 '21

Wow I weren't know that, thank you

Dima Prohorenko • Feb 28 '21

Glad to help)

Tiago Rangel • Nov 25

You can on broken images

b-meet • Feb 28 '21

You added two display properties in img style i am quite confused does that empty line you left mean anything or.....not, and plz tell something proper about why you added two display so i get it😐☺️