Placeholder Image

Subtitles section Play video

  • Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

  • 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.

  • I don't have to go back and modify the image size also.

  • So again, that's one of reasons why I did that type of thing.

  • Basically, So again, you're gonna do the whip and you're going to the height again.

  • I did auto here too, so that auto resize is the height along with the width.

  • Keeps everything in the proportion.

  • Then we're going to go down again.

  • The text over lies.

  • So essentially, this is Creon the canvas.

  • The position is going to be relative.

  • So position is one of those things in CSS generally is either right or it's wrong.

  • If it's right, it looks good.

  • And if it's wrong, it's ugly as hell eso In order to be able to center this div in order to to center this canvas on the page, I need to make the position relative.

  • You make it absolute.

  • It'll slam it all the way over to the left side.

  • This is one of those things you could just play around with and see what works and see what doesn't for you.

  • But again, if you if you want a center or if you want a position, the basically that div on the page, then you're gonna need to make it relative again.

  • You're gonna make the wit whatever you want the wit to be and you can make the height whatever you want the height to be.

  • So I again, this is now 400 or 300 pixels and in the height will be auto.

  • Basically, whatever is required for the image, then we're gonna go down.

  • We're gonna take a look at that.

  • Over light Title s over here.

  • We're gonna notice that the position has to be absolute.

  • So what we're saying here is that we're going to give an absolute position for where we're going to start writing the text.

  • And so it has to be at that position.

  • It absolutely has to be at that position.

  • Is that relative is not all relative.

  • Sometimes it's got to be absolute.

  • So this is one of the things that can screw you up is do you remember if you're gonna be moving the image around basically moving the canvas around on the page, the position for that has to be relative.

  • But for whatever you're gonna be positioning within that div within that container, that does have to be absolute, because you actually have to give coordinates for where you want to start writing that text or positioning whatever CSS thing you're positioning There.

  • It's over here were saying from the top we want zero additional pixels and from the left we're going to add 16 pixels.

  • Get color is gonna be white.

  • Background color is gonna be like gray overlay date again.

  • Position also has to be absolute than from the bottom.

  • We're gonna add five pixels from the left, the same 16 pixels and color is white.

  • Basically, to give you an idea of how this works s So let's say I want to change us.

  • So let's say 50 pixels on one add 50 pixels from the bottom.

  • I can file.

  • I cannot save.

  • If we go over, we take a look at our demonstration.

  • I can refresh.

  • And now you see that that has moved up quite significantly.

  • Go back.

  • Can get to five.

  • Oh, I don't know.

  • For the left, I could do like 60 pixels.

  • I suppose if I wanted Thio file, I save again a refresh And now this has been moved over.

  • So it's been break brought down to the five pixels again and has been moved over to 60 pixels instead of 16 pixels.

  • So again, you can play around with that kind of stuff again.

  • Remember, this is this is all based off of the class, so the position and everything else is based off the class.

  • So if I go here and let's say for this H one, I could theoretically came this back to, let's say, a p tag.

  • So I didn't want to do an h one tag could do a p a new file I had saved Go back here and when I hit refresh Now again, you can see that it's at the same position.

  • So the position is based off the class, the colors based off the class, the background color is based off the class so all of that is based off the class.

  • But then now you have the formatting for whatever the default p tag is.

  • So again, this is where you can also layer layer Cem, Cem CSS in there so you could you could define what you want the p tag to be.

  • You could make some some other some other modifications there to make this look however you wanna look.

  • But this is the basic idea of how you overlay text essentially over your images using CSS.

  • So now you know howto overlay text over images using CSS again.

  • The important thing to understand here is what you're really doing is you're positioning text within a div essentially within a container that you've created that happens to also create contain an image, right, that's MME.

  • Or how you're doing it again.

  • One of the reasons people get confused is they think they're trying to position the text over the image file, so they're trying to figure how the image file and the text relate to each other, and it kind of sort of does.

  • Basically, you have a container.

  • You position the text within that container and the container.

  • That also happens to have an image file in there.

  • The important thing.

  • Their toe also realizes that you do have to form at the image, file itself properly again or or you'll get a mess If you try to put a 700 pixel image file into a 300 pixel container.

  • Basically, it's not gonna work out so well, eh?

  • So now you know a little bit more about how to format images using CSS Now, this could be a very important thing in the Web development world.

  • Basically, if you're creating Web APS or Korean, he's a criminal.

  • Documents is one of the big issues, especially for new new developers is they always try to run back to image editing software whenever they need a new emmick s.

  • So let's say you have an image.

  • You need to have it modified a number of different ways for for the different ways that you're going to do it within your Web application.

  • What happens a lot of times is that people than simply use some kind of imaging software, photo shop, you know, whatever else toe modify the emmick and then they end up creating, you know, 10 or 20 variations essentially on the same image file.

  • One of things to be thinking about is all those different image files then have to be stored on the server.

  • If there's some kind of weird tweak toe like any one of those in the finals are probably gonna tweet 20 other image files again.

  • Imagine if you want to tweak the color, you want to tweak the logo a little bit something like that.

  • Not only do you have to tweak one file, you tweet 20 files Beyond that, if you're gonna be using that in a Web application, basically this is gonna be brought over an I s p connection over an Internet connection.

  • So that's going to be banned with 20 different image files being sent to the Web browser.

  • There's a lot of resource consumption that doesn't necessarily have to be there.

  • You could theoretically, and you do have to be careful about how you do this properly.

  • But you could essentially have one image file, and then you see SS to modify that single image file 1000 different ways within the HTML document itself.

  • So so again, when you're gonna be looking at formatting images with CSS, as I showed you before you create rounded, you can create round and borders.

  • You can make that damage largely could make damn it smaller you can you overlay text over the image.

  • Beyond that, you do things like image filters.

  • There's a lot of cool stuff you can do with CSS with your images and what you have to think about from a resource perspective is then all you're doing.

  • They're sending a couple of lines of text like Imagine sending an entire image file on the size and requirements for that, versus five lines of text, right, emitted of a certain class or whatever else blah, blah blah.

  • It's a lot easier on systems to be able to parse that most of time, then to be sending lots and lots of lots of image files.

  • So one of the things that you should be thinking about, whatever you need to modify your images for your Web applications or your HTML documents before you run to that image editing software.

  • Take a look at what you could do with CSS, and you might find that to be a more efficient way to do things again.

  • This is one of those things, too, where you have to.

  • You have to use your technologies in conjunction with each other.

  • So again you know you don't wanna have huge image files that you're then using CSS to shrink down a thumb.

  • Right?

  • If I have a five meg image file and then I'm using using that for, like thumbnails, that's probably not the most efficient way to do things right.

  • Figure out what, what, what?

  • That that file should be a thumbnail size and basically just used the imaging software to shrink it.

  • But again, with some of the things like filters again, if you want to make small edits to the image file that might be better done with CSS.

  • And so that's where again, when you're thinking about is a professional, you need to be thinking about resource consumption on all sides.

  • Resource consumption on the server, resource consumption on the Web, browser resource consumption with the Internet connection.

  • Look at all of those things.

  • Go okay for this solution.

  • Let's create the re versions of that image.

  • And then those three versions of the image will be modified 1000 times of CSS, right?

  • That's the kind of thing that you should be thinking about in the real world.

  • So, as always, I enjoy doing this class and look forward to seeing it the next one.

  • If you like the content that I create, please think about going to align the computer guy dot com and becoming a member or donating.

  • Please understand that all the educational videos are in front of the pay wall that includes the videos that includes the notes, the diagrams and the code.

  • Example.

  • All of that is freely available and in front of the pay wall.

  • But if you want to watch opinion videos, or if you want to be able to comment.

  • You do need to become a member.

  • Membership is $5 a month or $60 a year and gives you access to those opinion videos and the ability to comment.

  • If you don't want to become a member, you just want to give a one time donation.

  • There is also a donate button where you can do that.

  • Please understand.

  • In order to provide the education that I am.

  • It does cost money, servers, cost money, equipment costs, money, travel costs, money.

  • All of these things cost a reasonable amount of money.

  • And the fact of the matter is, is YouTube's advertising program no longer supports creators the way that it used to.

  • So if you want to these classes to continue to stick around and you find them to be valuable, please think about either becoming a monthly member or donating a few dollars for this project.

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it