We're going to see how we can import the image, how we can select it using CSS, and then how we can style it and customize its size. If you want to, you can use your own logo or you can use one of the demo ones that I have here. I'll include a link in the show notes for you.

The very first thing you can do is open this up and you can see we have a dark version and then a white version. For this specific background, we really need to use the white version. So, right-click on this and then click Save Image As.

You can keep the name exactly the same and then place it inside of your project. Now, you can just hit Save right now, but we'll customize exactly where it's at so that we can see the path and so we can organize it properly.

If we switch back here and then go to the code, I'm going to place this above all the other nav-links here and let's just call it .banner-image. This is going to be a wrapper div. Then I want to use an image tag.

If you're using Visual Studio Code, you can type img, hit tab, and this is going to give you the values that you want. Now because we place this at the root of our project, you can see that we have this decamp-fantastic-fries-logo-white right here.

We could just grab this value. Let me actually copy that name, so that I'm not typing it out verbatim. Then you can place that inside of this src tag.

Now this src tag. It stands for Source, which means that we're telling the image tag that the source of this image is this path. Then we'll play around with how we can place this image inside a different part of the project.

index.html

<div class="banner-image">
    <img src="decamp-fantastic-fries-logo-white" alt="">
</div>

Now we also have this alt tag. Here I'm going to say the Logo. Now technically. you could say anything that you wanted right here.

index.html

<div class="banner-image">
    <img src="decamp-fantastic-fries-logo-white" alt="Logo">
</div>

The rationale for the alt tag is, there are a couple of reasons. One is if someone has disabled images in their browser, then the alt tag will show up instead of the image. The most common reason for using the alt tag is for accessibility reasons.

So if someone, say, someone who's blind, is going through your site, the way it works is there are systems out there that will read things like the alt tags in your content. If you leave the alt tag blank, then they're not going to know that a logo was there. That's part of the reason.

Google also reads through this for search engine optimization reasons. It's always good to put some kind of value here that describes what the logo is or that a logo is there. That is going to give us our basic import.

Let's go back and hit refresh, and wow, you can see, that it is imported, but that's definitely not what we're looking for. That's fine, that's what we expected.

By default, the way that HTML works is it brings in the image and it does not do anything to it. It doesn't try to make it fit or anything like that. That is our job. Now let's see how we can select this image.

We know that we have a class here called banner-image, and there are a couple of different ways that we could customize it. I could come in the tag itself and just say that I want to provide a hard-coded width inline.

Here I could say width, and for this kind of size, the value that I saw that looked the best was something like 216px. Then let's give it a height, and the height here, you can combine pixels and percentages. So, for the height here I could say just 100%.

index.html

<div class="banner-image">
    <img src="decamp-fantastic-fries-logo-white" alt="Logo" width="216px" height="100%">
</div>

What this means is that we are controlling the width, we're saying how wide it should be. Then we're telling the height to just be automatic. I'll hit save, and now if I hit refresh, you can see that works. That looks really good.

That's perfectly fine. I usually don't do it this exact way. The approach I usually take is to apply an actual CSS class to it. So, if I have my banner-image here, what I can do is come down to the bottom of the styles.css file, and say .banner-image.

Then I want to select the image tag inside of that. Now I can apply the exact same rules. So here, I can say:

styles.css

.banner-image img {
    width: 216px;
    height: 100%;
}

Hit save, go back, and hit refresh. You can see that is working properly. That's just my own personal preference. Part of the reason is because I don't really like my images to get really messy.

The more code that you put inside of this tag, the longer it's going to be for you to find it when you need to fix it, and it just starts to look a little bit cluttered. I'd much rather put it inside of a style tag. That is how you can import and then customize an image using HTML.

There's only one more thing that I want to do before we end this guide and that is I want to place this inside of a little bit more logical place. Right now, you can see that I have the image at the root of the project, but this doesn't make a lot of sense because.

If I start bringing in dozens or hundreds of images, this is going to start to get really messy. Instead, what I'm going to do is I'm going to create a new tag or a new folder here. I'm just going to call it images, and then inside of images, I want to pass in another folder.

I can right-click on it and click new folder. Here I'm going to say logos, and then what I can do is I can just click and then drag this in, and it says, "are you sure you want to move this?" Yes, I say I want to move it.

Now this will break the site. If I hit refresh here you can see ... oh, one thing that is cool. You see that little alt tag is showing up. If the image is not available, it will show the alt tag.

Now we have a broken image and it's because we need to update the path. So here, I will say that I want it to find it in the images directory, in logos, and then it will go and find the image file.

index.html

<div class="banner-image">
    <img src="images/logos/decamp-fantastic-fries-logo-white" alt="Logo">
</div>

Switching back to the browser, hitting refresh. You can see that the image is back and it is working properly.

Resources

• Source Images