FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Image Replacement

[SOUND] Many times you don't want to use text for your logo, even though it makes sense to add the name of your business within an h1 tag, you might prefer to use an image of your logo. How would you do that? The first step is, of course, to get your logo. If I open up our project, you'll see that I've added a Nettuts logo to the images folder. Let's learn how to reference it. And I'm gonna show you two different ways. The first step is, we could have an h1 tag. And we do Nettuts. And this is the most basic form. We're using text for our logo. Reload the page, there you are. Now, we want to change that, and use our logo instead. One way, and this was frowned upon, but I think it's okay, and a lot of people do, is and you can simply nest an image tag within here. And here we will link to the image. img/nettuts_logo.jpg. Now, the reason this is okay for SEO purposes, is we can still provide alternate text of Nettuts. That way if images are turned off, it'll still display Nettuts. Now if I reload the page, you see our image. This is fine. But a more common way is to use image replacement. And the way it works is, you instead apply the image as a background of the h1 element. A lot of people think this is cleaner, especially for your markup as well. You don't have images. It's easier to understand, this is my logo. So let's do this now. H1, and now we're going to specify a background. Now, you know we can use colors like red, but we can also specify URLs to the image. In this case we'll say img/nettuts_logo. However, this is not going to work, if I load the page, you're not gonna see it. How come? And that's because, remember, your style sheet is within the CSS folder, however the image, is up one folder into the sibling img folder ,and then within it. So we need to specify from the current file, style.css, go up to your parent, then find a folder called img, and then get nettuts. So I'm gonna do period, period forward slash, to go up a folder. Now if I reload the page, you're gonna see, and this is very odd, isn't it? Remember, heading elements have a display of block by default. If we wanted to override this to in line, you'll see that the width will only be as wide as is necessary. So here, nettuts is finished, so it immediately cuts off. But next, if I remove that, why is the image repeating the entire width? And that's because, even though the text only takes up a small portion, the heading element, takes up the entire width that is allowed. As you can see right here if I resize the window. If we instead change the body, which is the wrapper, and we give it a width of 600, the background would then be stretched for 600 pixels like so. But what if we want to say, you know what, I only want this image to display once. Why is it repeating at all? And it's repeating because, it's oftentimes common to use a texture, or a grain, something like that for a background. In which case, you do want it to repeat. That way you don't have to use a massive image, when you just maybe want a little bit of a sand background. You can get a tiny fragment, a tiny image, and then repeat that for the entire width of the window, and it saves you a lot of bandwidth. Now here, if we, after the URL, specify no-repeat. And that means, don't repeat this image at all. Other options are repeat-x or the default of repeat x and y, or just repeat-y alone. Here, we're gonna override it, no-repeat. This is a single image. Now reload, and now it's being displayed like so. The next step is though, it looks like the image is cutting off a little bit. And of course, we don't want to display the text itself and the image, so maybe we should try to push the text on top, all the way off the page. And we can do that by specifying a new property, text-indent. Now, if we were to set that by ten pixels, you would see the text would be pushed up ten pixels. If I do 50, it's pushed up 50 pixels. So, why don't we put it a huge number, negative. And that's gonna push it, not to the right, but to the left. And now we're gonna push it off as huge enough number, that it would never show up on a computer screen. Reload, and now it's disappeared, but in actuality, it's really far off to the left. Good, so now, this is looking a lot better, our markup looks fine, nice and clean. But now I see, right here, it seems as if the image is cutting off, and that's because the image itself, is taller than the heading text, so we can explicitly state what the width is, of this image specifically. And you can do that by maybe opening up Photoshop, or going to the image, and viewing get info. Why don't we do that. Open this up, Get Info, and we can see right here, the dimensions are 142x43. So let's specify that now. Come back with 142 pixels, and a height of 43 pixels. And now, the h1 will be set specifically to the dimensions of this image. And the text itself, will be put off the page. Reload the page, and there we are. And we have perfect image replacement. So one thing you might be thinking is, well why add the name at all, because you're just gonna push it off the page? Why don't we remove the name, and then you can get rid of this property entirely? Reload and it looks the same. And you're right. It does look the same, but its not the same. The difference is, what if the browser does not have images turned on. In that case, they would see nothing at all. What if the image does not load for some reason, maybe it's not referenced properly, maybe you accidentally delete the image in the future? Again, nothing at all would display. Also, maybe what if CSS was disabled entirely? In that case, the image would not show up, because we're adding it. So, once again, nothing would be displayed. Surely, you see where I'm getting. So, always make sure you add it here, and you use a text-indent technique to push it off the page. That way, you're good in most situations. Reload the page, and now you've done your first image replacement.

Back to the top