DEV Community

Dima Prohorenko
Dima Prohorenko

Posted on • Updated on

How to style broken images with css

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.

Top comments (35)

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

Hi, I don’t think so

Collapse
 
meetbhalodiya 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

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

Collapse
 
meetbhalodiya profile image
b-meet

Thanks man

Thread Thread
 
sasscrafter profile image
Dima Prohorenko

😊

Collapse
 
fettah_aud profile image
Fettah Aud

You cannot use peusedo elements with img tag

Collapse
 
sasscrafter profile image
Dima Prohorenko

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
Dima Prohorenko

😔

Collapse
 
fettah_aud profile image
Fettah Aud

Wow I weren't know that, thank you

Thread Thread
 
sasscrafter profile image
Dima Prohorenko

Glad to help)

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

Yep, same here :)

Collapse
 
wawasensei profile image
Wassim SAMAD

Very clever !

Collapse
 
sasscrafter profile image
Dima Prohorenko

Thanks

Collapse
 
smilydawra profile image
smilydawra

Very nice 👌

Collapse
 
sasscrafter profile image
Dima Prohorenko

Thanks

Collapse
 
anandvip profile image
Vipul Anand

Good to know!

Collapse
 
sasscrafter profile image
Dima Prohorenko

Yep

Collapse
 
thedzko profile image
Mauricio Mercado

Great!

Collapse
 
sasscrafter profile image
Dima Prohorenko

Thanks

Collapse
 
guydumais profile image
Guy Dumais

Brilliant, thanks for sharing :)

Collapse
 
sasscrafter profile image
Dima Prohorenko

No problem

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

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

Collapse
 
sasscrafter profile image
Dima Prohorenko

Definitely give it a try)

Collapse
 
itscasey profile image
Casey 💎

Wow, this is such a great idea!

Collapse
 
sasscrafter profile image
Dima Prohorenko

;)

Collapse
 
vajresh profile image
VAJRESH

Nice, what I needed for my next project. THANKS

Collapse
 
sasscrafter profile image
Dima Prohorenko

No problems mate 👌

Collapse
 
sasscrafter profile image
Dima Prohorenko

Thanks)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
sasscrafter profile image
Dima Prohorenko

Thanks