Adding a Background Image

[00:00:00]
>> Jen Kramer: So let's do some stuff to make that look a little bit prettier. I'm gonna go ahead and open up my CSS file. If you don't already have it open, you may wanna go ahead and have it open. And I'm gonna tell you about some styling that I did for this.

[00:00:17]
And it explain to you what I did. And you can do whatever you want with your styling for your forms. Pretty much styling works the same way everywhere. You have a whole bunch of new HTML elements here you haven't seen before. But styling them works exactly the same way as every other HTML element you work with to this point in the course.

[00:00:38]
So you can just go through here, and for example, add an input as a selector. And you can style all of your input types in a certain way. So I'm just gonna go on ahead and show you a few things that are going on here. So in our document In our CSS, let me get my word wrap on.

[00:00:58]
You'll notice that we have our wrapper here. So our wrapper is 80% wide, and the margin is 0 auto, and we also have it as display flex, and the flex-flow is row nowrap. Then we have our section and aside there next to each other. So, the flex basis is 57%, we've got a margin on the right of 10%.

[00:01:24]
And then we have a flex-basis of 33% for the other part of the page. So roughly one or two-thirds of the page is the form. One-third of the page is that additional column, that's good. Eventually, we're gonna put a map over there on the side, okay? And so that's where the current styling is coming from, from that particular form.

[00:01:43]
That's why this is showing up over here. That's why we have the form showing up over here on this side. Everybody good with what we've got over here at the moment? We have a little spacing going on in here, a little bit of margin stuff going on. But we don't really have any other stuff happening in terms of styling.

[00:02:04]
So I'm gonna show you a cool little trick that makes your web pages look kinda fun. We've been working a lot with place-kitten, and a lot of you love having the kittens for background images. Well, kittens don't go in space, they just can't fit into a spacesuit. I do have for you here, in your files we do have an image that's available to you.

[00:02:29]
It's called galaxy.jpg, and I'm gonna set this as the background for my whole body of this web page, and because that seemed like a good picture to use. Thank you NASA. So all we have to do is here in the body tag, we wanna add a background image.

[00:02:46]
So what do I put here?
>> Jen Kramer: Background-image, and then we're gonna say, url is going to be, what? Pop quiz, yes, Jenna?
>> Speaker 2: It's like img/galaxy.jpg.
>> Jen Kramer: Galaxy.jpg, okay, is this correct? The answer is, it's probably not gonna work, but let's test it. Let's test it, we refresh the page.

[00:03:24]
It quote doesn't work. Why doesn't it work? What is this url saying? Where are we currently in our directory structure? Where are we currently in our files and folders, okay? We're here in forms.css, right? What do I need to do? I need to go out of the CSS folder.

[00:03:44]
So that's 1../, right? Then go into the img folder, and into galaxy.jpg, correct? Okay, so we got to have a ../ in front of img, there we go.
>> Jen Kramer: All right, so now when we refresh, my God, it's full of stars.