DEV Community

How to style broken images with css

Dima Prohorenko on February 26, 2021

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'...
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
 
sarveshtheabstractor profile image
Sarvesh Hiwase

Really clever post

Collapse
 
sasscrafter profile image
Dima Prohorenko

Thanks)

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
 
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
 
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
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
sasscrafter profile image
Dima Prohorenko

Thanks