Styling Text on a Background Image

[00:00:00]
>> Okay, so the next thing we're going to add to our webpage is this comet image. And I have given this to you down here in the JavaScript box. If you pull that on up, you'll see down here at the bottom, it says, comet image, and it has a web address.

[00:00:16]
So you'll wanna highlight that web address and copy it, CodePen will allow you to upload your own images, but only in the paid version. You have to be a pro member in order to do that, which I am. All of you who are following along are likely free members, and you can't add your own images, so you'll just use mine.

[00:00:37]
So I am going to copy the URL for that image. And then back in my CSS, we're gonna start with our layer intro. And I'm going to create a new style called .intro. And that comes from my section with a class of intro here in my HTML. So we're gonna put this on the outermost box, the one that's gonna stretch all the way across the web page.

[00:01:07]
And the first thing that I'm going to add here is my background-image:, and that will be url with a set of parentheses. And inside of that set of parentheses, we will paste in our URL. And you'll see it'll show up right there on the screen, okay? And if it looks like that, you've done great.

[00:01:34]
[LAUGH] What's happening? Can anyone describe to me what's happening here?
>> The text is blending into the background.
>> The text is blending into the background, which we know, right, the text is black, the image is black. That doesn't quite work, so we're definitely gonna have to change that text color.

[00:01:50]
Why can't I see the comet?
>> It's displaying at full-size.
>> It's displaying in full size, and we're seeing the upper left-hand corner of our image, okay? Where is the comet? Not in the upper left-hand corner. [LAUGH] All right, so we need to make some adjustments here so that we can see the image.

[00:02:12]
So the first challenge of course, though, is we simply have to get the image up there on the screen. And then we can work from there. So never panic, you can always add more code in order to make this do what you want. So the first thing I'm going to add to this is background-repeat.

[00:02:33]
And I'm gonna say, no-repeat. By default, background images will repeat. They repeat going across the page and they repeat going down the page. By setting this to no repeat, we're only gonna see the image once. So if this web page gets big enough, we won't see comet after comet after comet going across the page, we'll just see it one time.

[00:02:54]
So that's what that line of code does. Then we're going to say our background-position. So this is gonna tell us where we want the background image to display. And we have done work, a lot of work, [LAUGH] messing around with percentages to figure out exactly where the sweet spot is for this image.

[00:03:17]
And I have set this at 86 %, 20%, okay? If you were doing this in real life, you would be typing in random numbers here until it looked good. That's just kinda the way we do things in CSS. [LAUGH] 86%, I believe, in this particular case, is referring from the left side of the page going over.

[00:03:42]
As I recall, the head of the comet is kind of up on the right-hand side here, and we're 20% down on that image. So there's that comet showing up there. Anyone wanna make other suggestions? Should we change the text color? Okay, let's change the text color. How would I go about doing that?

[00:04:05]
What is the CSS property to change the text color?
>> Just color?
>> Just color, and what is the value that I wanna put here?
>> Var white?
>> Var white, yeah. Remember we already set all this up, var white. Hey, that already looks so much better, okay?

[00:04:30]
What else should we do here to improve the look of this particular item? Anybody feeling a little crowded? Maybe feeling a little crowded? So how would I make more space here but keeping the image in place? There's padding and there's margin. So which one would it be? Which one is gonna keep the background image in place?

[00:04:58]
Padding or margin?
>> Margin?
>> Okay, how many people say margin? [INAUDIBLE]
>> One vote for margin, how many people say padding?
>> Online have a few votes on padding,
>> Three votes on padding, one vote on margin. If you're never sure, you can always type both in.

[00:05:17]
So if we said margin, let's say 4rem 0. Oops, not quite what we're looking for, so then you can just change it. It's one of the great things about coding. If it's not right, just change it. Much better. All right, so somewhere along the way, I lost my uppercase letters here from my heading.

[00:05:39]
So let me go back into my base styles here, and I'm just scrolling, a little it looks like I didn't quite add that here in the code that I carried over. So if you scroll back in your CSS to around line 55 to 60, you'll see we have all those headings there.

[00:05:59]
To this, we should add text-transform uppercase. So we'll do it for all the headings, there we go. What about let's compare this with what we have with our image. Let's look at our image again. What else do I need to do with what I have in my CodePen?

[00:06:23]
So look at your image, look at your CodePen, what else do we have left to do here?
>> Make the link more readable?
>> Yeah, make the link more readable. The green is lovely, it matches the comet, so lovely, but we can't read it. We need to make it white.

[00:06:40]
So how would we go about doing that? We already said A, our colors for our links via the A style in the base, we already said that was gonna be green. What are we going to do here to set our a style here inside of just the intro.

[00:07:01]
We know it's gonna start with a, cuz we read them from right to left. So it's all the as that live where?
>> In the intro.
>> In the intro, all of the as that live inside of the intro. So intro space a, and then we're gonna say what goes here.

[00:07:28]
>> Color.
>> Ha-ha, and,
>> Uh-huh, look at you go. Color var white. Boom, there we go, awesome. The last thing I wanna do is I wanna make my name bold, okay? So my name is up there at the top, but it's not bold. So I am going to go back to my HTML, and I want just my name to be bold, so I'm going to add a span with a class of name, cuz I'm super creative that way, /span.

[00:08:11]
Why did I use span and not div?
>> Span is inline?
>> Yes, span is inline. So what do we mean by inline? How wide is an inline element?
>> As long as it's content?
>> As long as it's content, right? Inline elements are as long as their content.

[00:08:41]
The opposite of inline is block. How big is a block element? As wide as its container, okay? So inline elements are as wide as their content. Give me some examples of elements that are as wide as their content. We just worked with one. How about a link, yeah?

[00:09:04]
We don't wanna go link a whole entire paragraph, right, okay? But things that are as wide as their container would be things like paragraphs and headings and divs and so forth. Things that are as wide as their content would be things like strong and m and n a and span, okay?

[00:09:23]
So there we go, and then down here, we'll add to this a .name class. And we're gonna say, font-weight 700, because 700 happens to correspond to bold. And so hopefully, you can see it made it a little bit bold up there at the top. If you wanted, you could do other things here.

[00:09:45]
You could say, my font size would be var, let's say, h5 to make it just a smidge bigger. That would be something that you could do, right. Cuz we have those sizes, we've already set them up, you could apply this font size to that whole entire paragraph if you wanted to do that or just to your name.

[00:10:06]
So there are plenty of additional changes you can make here. So congratulations, you've set up your very first section of the webpage.