Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy, and in today's class, I'm going to show you how to overlay text over your images in HTML documents using CSS.

This is one of those things where if you understand what the process is, it is very easy.

But if you do not understand what's going on, it's very complicated, frustrating, and you end with a complete mess.

So I'll be showing you how this works today.

Now, the important thing to understand when we start talking about over lane text over your images in your HTML documents using CSS is that's kind of sort of not actually what we're doing again.

One of the big problems the technology world, especially when you're learning technology, is you will look at something and you intrinsically think you understand what you're looking at.

And so then you try toe basically reverse engineer, figure out how to do it, and the issue that you run into is what you're looking at is not what you think you're looking at.

So when you try to figure out how to how to replicate it, it turns into a mess.

So when we start talking about overlaying text on images using CSS, that's kind of sort of not actually what we're doing now.

Don't get me wrong when you look at a Web page and there's an image and there's text over it.

Obviously the text is overlaying the image, but there's a little bit more going on than you may understand.

What's really happening here, and this is the way to think about it is that you're actually creating a canvas.

You're creating a canvas, and then you're positioning things within that canvas to present an image with overlay text.

So what happens is you created div of a serving class.

You're gonna creative.

It's gonna have a certain size.

It's gonna be positioned, you know, wherever on the page and then from there, what you're going to dio is you're actually going to add an image to that defend.

So that image that has to be formatted properly to actually fit into that canvas fit into that debate that you've created and then passed that when you're going to be adding the text, you're essentially then going be adding text at specific positions in the dip right in that canvas that you've created, you're going to say from the from the top or from the bottom from left, wherever this is where I want the text to start being printed.

So realistically you could take the image away completely.

And still you could simply position the text within the DIV.

Basically on this canvas however you want.

But what we're doing is we're putting essentially the image as a background, and the text will be over top of it.

And so therefore, it seems.

And it is that the Texas overlaying the image so is more.

It is important to understand what we're really doing here is we're positioning the text within the container within that div that we've created that happens to also have an image, right.

So with that, let's go over the computer.

So I can give you a demonstration and show you how this works.

So here we are, at my demonstration machine again, I'm using a Mac book.

So I used text edit to write these two files.

But all you need is an ask you text editor in order to write these basic types of scripts, eh?

So if you're in the Windows world, you can use note pad again, the macro Deacon's text at it.

If you're in Lenox World, you could use g et it nano them whatever it is that you want.

So the two files that it created today is I created one final called overlay dot html.

So this is the document that will open up in your in your Web browser.

It could be named whatever you want.

As long as the end is either dot HTM or dot html.

It is then going to be pointing to a style sheet called overlay style dot CSS on.

This is where our styling is.

Now, before we get into the actual code, let me show you the demonstration so that you understand what we're trying to accomplish today on.

Basically, this is the demonstration eso here.

I've given you the example of essentially two pictures.

Do you remember in the HTML world when you put an image on a document, all that is is a pointer.

So when I'm showing you, demonstrations with images usually just reuse the exact same image, you know, 1000 times just to make my life easier.

But if this was going to be on a web page, obviously in a production environment, this will be pointing to multiple different images.

But here again, I can basically point to the same image and show you the different things that I could D'oh eso essentially here I have two images on What I've done then is I've created a title.

So basically, I've created a title class and here for that title class, the the text is going to be white with a background of light gray.

I've been said that basically there is a div.

So what we have here is we have a debate that I have centered on the page and so within that defy I've said from the top and from the left, this is where the text should be printed.

Then for the p tag again for like let's say additional made it metadata down here.

Simply like taken, you know, july 4th, 2011.

This is an additional classes, a different class, and basically I've just said from the bottom and fromthe left, this is where they should be printed out.

When we go here and we take a look, I use an eight to tag again.

Just basically a different example.

You'll notice against us.

I'm using the class.

I can use different tags in order to to write out this text.

It will still be in the same position.

It will still have all the other default formatting s O that using a to tag and title another cool pick and then down here again, Let's say that's for when the picture was taken or whatever else.

This is really kind of cool here because what you can do is you can have the image.

So the image itself, this can be a hyperlink.

You know how you can create hyperlinks out of almost anything.

So the image itself could be a hyperlink.

And so this could be, let's say, the title of a blogger post to the title of the image.

This could be some metadata data down here basically to give you some additional information, maybe when it was published Category tags, that type of thing, other things you can think about for overlaying text over an image.

Now imagine if you had pictures that were you were sending up to some kind of machine vision a p i or serverless architecture, that machine vision a p I would then tell you give you tags of what it thinks is in those images.

And so basically, you could then create a web application where you see what the picture is.

And at the bottom, they could show that what the machine vision system tagged.

You know what?

What does that machine vision system thinks is in the picture?

So you could do all kinds of stuff like that?

But basically, this is the example of what we're gonna be doing today.

So with this, in order to do it again, we have Thio two documents here.

Uh, first thing that we're gonna look at is the html document itself.

So this is what we'll be opening up in the web browser.

Eso As always, we're gonna open up the h him out we're gonna open up with tag or that the head.

And then we're going to link to the style sheet.

So again, the ref overlay style Nazi SS Since a silent she is in the same folder as Theeighty ml document.

I can simply put the name there.

It was in a different directory that I would put the full folder path to get to it.

We're gonna close the head, um, and then we're gonna open the body.

Now we're gonna get to the interesting parts and what I want you to understand is when we're taking a look at the image and the overlay and everything, all of that is within this one, def.

So basically, we're gonna create a diff think of us, Div as a canvas.

We're gonna be creating the canvas and they're gonna be putting everything into that campus s We have a debate about doing a div, and this class is going to be text overlay.

So I've created a class text overlay for this class text overlay.

I put a position of relative.

The reason I put a position of relative using CSS is it allows me to position that that Div on the page.

So what I'm doing is I'm centering the div on the page.

So shows up, obviously the center.

So basically a position of relative margin hyphen left, auto market hyphen, right, Auto, that is going to center the debate now, an important thing to understand here is that I've been created a wit and I height for the death.

So the width is 300 pixels and the height is going to be auto.

So what I want to say is, I want I want this to be a maximum of 300 pixels wide on the height Will will be whatever the automatic will be, whatever the automatic is for the image, why that becomes important is we would go down here and the next thing that we're going to do is we're going to add to the image itself s o for the I.

M.

P tag.

We're gonna add an image and that is going to be picture a 700 dot j p g.

Now Why this is important is this is an image I have used numerous times the past that created it as an example Ah, a lot of classes ago and why it's called 700 is because it's 700 pixels wide.

Well, what do you think is going to happen if I put a 700 pixel image into a 300 pixel container?

Essentially, um, nastiness is going to happen, right?

So one of things and that's what you have to be thinking about is then what I've done is I format in the I M e tag or in the CSS world, the I am key element.

And what I've said is make the Max Witt of it be 100%.

So I went the max with of this image to be 100% of essentially whatever container I put it into.

So I put this directly under an HTML document without any dibs.

Without anything else, it will be 100% width of the entire size of the Web browser.

Since I'm putting it into a container since I'm putting it into a div in the 100% will be the 300 pixels.

So what, Max is it at that 300 fixes, then we're gonna go down, and we're actually gonna start adding the text.

So the first thing that we have here is we have a tch one that is going to be a class of overlay hyphen title.

So I created a class called Overlay hyphen title, and this will be the title Cool pick.

So we're gonna go down and take a look at the class of overlay hyphen title.

So for this one important things understand is when you say position, the position has to be absolute, So position relative here, I make the position relative so that I can move the image round on the basic black and move the dib around on the screen so I can put it in the center here.

I'm going to make the position absolute, because I'm actually going to say where I want this text to show up within that div within that container.

And so I wanted to be the default zero pixels.

So basically from the top, So from the top, just leave it wherever you're gonna dump it, wherever the default is.

And then from the left I wanted to be 16 pixels, so that's going to put it.

We go back here for the H one that's going to put the the one we're writing out the text that's gonna put the location of where that text should be written out at.

We're gonna go down.

We're gonna take a look at that piece we're gonna create.

We have a p a class of overlay hyphen date.

So that's where we say taken on July 4th.

You'll notice that's an entirely different class.

So we have a class of overly hyphen date again.

The position here is going to be absolute.

We're going to say from the bottom from the bottom, add five pixels fromthe left 16 pixels and then color white s O for here.

That's basically five pixels additional up, 16 pixels fromthe left.

And that is where we're going to be positioning this text for this particular class.

So?

So that's one of the important things here is when you're positioning text over your image is essentially within.

The Dev eat class is going to have a starting point for when you're going to be right in the text.

So if you want to put text in multiple places over an image or within that Dev, you're going to have to make multiple classes for that, then that basically what we do is we simply closed the Dev.

And so again, all of this, all of this becomes one unit.

You have a div.

That's 300 pixels.

It's gonna be in the center of the page.

You're then going to add an image that's going to be formatted.

It was only 100% of that 300 pixels.

We're then going to overlay a title.

Then we're gonna overlay the date doing a break just to give a little gap between the pictures.

Basically the exact same thing, more or less.

Copy and paste.

The only thing I did down here just to show you this is an H two tag versus an H one tags to the H to tag is gonna take all the values so you normally have with an H two.

It's going to add what you've added for the overlay title class on.

Then it's going to print this out.

So that's where that's where if Ugo again, this is the age to a slightly different It's a little bit smaller, but otherwise it has that background of grey.

It's positioned in the same place s O that let's go over and take a look at the CSS just to explain this a little bit more, just again to reinforce things.

So the first thing here again, one of things you need to be thinking about if you're going to be putting images within the container, is again making sure your images are formatted properly.

To be able to fit in the container, you have 700 pixel image trying to go into a 300 pixel container.

Ugliness will ensue, so however you want to do it.

So for here I did a width of 100%.

That makes my life easier because auto four Mathey image if I change the size down here.

So let's say I came to size here from 300 or 400 pixels.

They have file, I save.

I can go here, go to safari, and basically, when I do a refresh, you'll notice that basically the image resize is into that container.