FREELessons: 10Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Styling Broken Images

There’s nothing that screams “careless” louder than a broken image on your website. In this lesson, you will learn some CSS trickery for styling an image even when it doesn’t show up.

Relevant Links

2.2 Styling Broken Images

Hello and welcome back. It's natural to assume as a web designer that all of your images are going to look just fine whenever you publish them to the web. Because hopefully you've been testing your site as you've been building it out, and after publishing your site hopefully you've tested it again. However, sometimes things do happened and sometimes images get broken and there's very little that makes the site look less professional than a broken image. So in this lesson I want to take a look at a CSS trick. For styling a broken image, for styling what's left behind if your image for some reason does get broken. So let's start by opening up the starting pen for this lesson. You can find the URL for that in your course notes for this lesson and when you open that up, go ahead and click on Fork. So we'll start with this new copy that we've just forked and you'll see that we have an image here with a class of desktop and that image is floating to the left and specified the width and the height here. And if we were to break this image by changing the URL to say desktop0123, we can see what that looks like. And we've already taken some steps towards making this look a little bit better. First of all, by giving this an alt attribute and secondly by setting the width and height. If we were to undo all of that, than you'll see that all we have left here is just this tiny little broken image in the upper left hand corner, which looks even worse. So we've already done a little bit. At least taking the first steps towards making that a little bit better by specifying the size and the alt text there. But it still doesn't look good and there's a lot more that we can do to make it look better. And we're gonna do this using the before and after pseudo-elements on our image. So again, our image here has a class of desktop. So I'm gonna point to desktop::before, and then we're going to apply some styles to this before pseudoelement. So one of the first things that I always forget whenever I'm doing a before or after pseudoelement is to include the content property. This is something you always need or your pseudo elements aren't gonna work quite right. So even if your not putting any content in there, we still need that content property. So we're gonna set that just to a space, we're not gonna have much there. Then I want to set the background color here, I'm gonna set it to a light shade of grey with #eee. Now we still don't see anything there because by default, this isn't taking up any space. So let's say I wanted to set the width and heighth her to 100% and see what happens there. And you'll see that that still doesn't do anything for us because by default these before and after pseudo elements are in line level elements. So if we were to change these to a block level element by changing the display property to block then we'll get a better idea of how that looks. So we see that we've sort of replaced our broken image link, but we've actually just nudged it down and put a big grey rectangle in it's place. Well I want both of those to end up in the same place, so let's point to the image itself. And let's go ahead and break up the lines here so it's a little bit easier to read. And what I'm going to do on the image element itself is I'm going to give it a position of relative. And the reason I'm doing that is because I want to give the pseudo element a position of absolute, so that I can position it Within the same area as the image itself and as we can already see, the image has moved up in another way and on top of each other. So we can no longer see that broken image icon and it already looks a lot better. So then maybe we want to put a border around this. Maybe we can put a dashed border. So we'll do 1 pixel dashed and set it to a little bit of a medium gray color and that looks better. Maybe you can put a border-radius on it of four pixels. That'll round off those corners a little bit. And that already looks a little bit better. Then let's say we want to put this out text over our image as well or over our styled image replacement here. So, what I'm gonna do is we're gonna start our desktop after pseudo element and here I'm gonna set our content to an attribute and the way we do that is we type ATTR. And inside parentheses we'll type in the name of the attribute we want to display and that attribute is called alt. And we can already see that shows up down here below our rectangle. Well we don't want it to show up below the rectangle, we want it to move up to the top. So we're also going to set the position of this element to absolute. And it will move our text up but you'll see it's over here on the right now. So it's also set are within height here to 100% each. And then, when I set our top value to zero and our left value to zero And that gets it closer to where we want it. So I do wanna move the text down a little bit so maybe we'll set our top to 10 pixels and then we'll also set our text align value to center, and there we go. Now our text is centered in that window. Then we can just improve the look a little bit by maybe making the text bold and changing the color of the text to a medium gray. And there we go that already looks a lot better, so obviously you can take this to the next level you can style this up however you want to. I just wanted to give you some ideas of at least where to get started on improving the look of your broken image links. So thank you for watching and I'll see you in the next lesson.

Back to the top