DEV Community

loading...

How to style broken images with css

sasscrafter profile image Dima Prohorenko Updated on ・2 min read

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

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">
Enter fullscreen mode Exit fullscreen mode

This is what we get in the browser:
Before

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;
}
Enter fullscreen mode Exit fullscreen mode

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%);
 }
Enter fullscreen mode Exit fullscreen mode

Here's what browser renders
Alt Text

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%;
}
Enter fullscreen mode Exit fullscreen mode

Final output
Alt Text
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.

Discussion (35)

pic
Editor guide
Collapse
krishan111 profile image
Krishan111

@sasscrafter will doing this affect seo?

Collapse
jpomykala profile image
Jakub Pomykała

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

Collapse
sasscrafter profile image
Dima Prohorenko Author

Hi, I don’t think so

Collapse
aboodaud1 profile image
Abood aud

You cannot use peusedo elements with img tag

Collapse
sasscrafter profile image
Dima Prohorenko Author

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.

Collapse
cchana profile image
Charanjit Chana

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 😞

Thread Thread
sasscrafter profile image
Collapse
aboodaud1 profile image
Abood aud

Wow I weren't know that, thank you

Thread Thread
sasscrafter profile image
Collapse
sarveshtheabstractor profile image
Sarvesh Hiwase

Really clever post

Collapse
sasscrafter profile image
Collapse
bmeet profile image
B-Meet

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😐☺️

Collapse
sasscrafter profile image
Dima Prohorenko Author

Hi, thanks for pointing. Just a typo. You can use either inline-block or block. 😊

Collapse
bmeet profile image
B-Meet

Thanks man

Thread Thread
sasscrafter profile image
Collapse
georgedoescode profile image
George Francis

I like this idea! Always been a fan of just-in-case styles 🙌

Collapse
sasscrafter profile image
Dima Prohorenko Author

Yep, same here :)

Collapse
wass08 profile image
Wassim SAMAD

Very clever !

Collapse
sasscrafter profile image
Collapse
smilydawra profile image
smilydawra

Very nice 👌

Collapse
sasscrafter profile image
Collapse
anandvip profile image
Vipul Anand

Good to know!

Collapse
sasscrafter profile image
Collapse
thedzko profile image
Collapse
sasscrafter profile image
Collapse
guydumais profile image
Guy Dumais

Brilliant, thanks for sharing :)

Collapse
sasscrafter profile image
Collapse
nikhilmwarrier profile image
Nikhil M Warrier

Never though of that before! I have to try this out!!!

Collapse
sasscrafter profile image
Dima Prohorenko Author

Definitely give it a try)

Collapse
itscasey profile image
Casey 💎

Wow, this is such a great idea!

Collapse
sasscrafter profile image
Collapse
vajresh profile image
VAJRESH

Nice, what I needed for my next project. THANKS

Collapse
sasscrafter profile image
Dima Prohorenko Author

No problems mate 👌

Collapse
bmeet profile image
B-Meet

Cool

Collapse
sasscrafter profile image