In this lesson we're going to cover two new properties background which we use to change the background
color or the background image of an element and border.
So we're going to start with background as you can see I have a little example here.
So here's her end result.
Notice that we have a gray background on the body.
Coming from here and then we have a blue background on the div which is coming from here.
And then we also have white text on the paragraph.
So let's go ahead and try this using the About Me page that we've been working with.
And let's go ahead and change the my hobbies h forward and give it a background color.
Let's give it an orange color.
So again we want to select this age four so we type age four.
And then inside the curly braces you're going to say background and we'll do an R G B and we'll make
like a orangey color.
So they'll be a lot of red a little green and the little blue and let's refresh and we get this nice
coral color.
So next let's give the background let's give the body a background which is something you see often
on a Web site where the entire background is a new color.
So let's do some
something like background and let's just say that to be pink for now and then we go the entire background
is pink.
So that is the background property being used to change the color of something.
But we can also use the background property to change the background to be an image which show also
see pretty often.
So the way it works we still specify background but instead of a color we say you Arel and then in parentheses
we give it a u r l where the image is located.
So let's go find some woodgrain let's find an image like this one here.
So let's just copy this image.
You throw in we're going to set that as the background.
So on our body I'm just going to say background you Earl and in that you are Ellett I just copied.
So this will work with any image.
And if we refresh great we see that our background has been set but you'll notice one small thing which
is that our image is not really big enough.
If we go back to it it's not close to being big enough to cover our entire body here.
So what's happened is that it's being tightened.
You can see you know it's being titled tiled horizontally and vertically.
So if we don't want that and sometimes you do but most the time it doesn't look very good.
So if we don't want that there's another property that we can set and that is background repeat.
And if we set this to be no repeat and save.
Now we've set the background of her body and it's not repeating.
But you'll also notice that it's not stretching out to cover the entire body.
So if we wanted to get it to stretch out across the entire screen or across the entire body there's
one other property we can set which is background size and we can set that to cover.
So as you can see it now takes up the entire body.
Of course it's not the best image for this because it's a little blurry it's a little pixilated but
when you're doing a background image usually want to make sure you have something that is either large
and high resolution or something that has a smaller image that can be repeated seamlessly unlike this
one.
It's not you know symmetrical on both axes so if we repeat it it's very clear that there's divisions
and tiling happening.
OK.
So that's background and using background color and background to set a background image.
The next thing I want to show is how we get a border.
So I'm actually going to come at this out because it's a little distracting and let's just go back to
background as pink
and let's go and add borders to all h ones.
So a border and C S has three different parts.
There's the with the color and the style.
So let's start by giving a border color to each one.
It just looks like this border color and that border.
Let's just go with purple and if we refresh we don't actually see anything and that's because currently
our border has no width.
So the next thing we need to do is give it away.
So border with it will just give it a number in pixels.
Let's do five pixels five x refresh and we're still missing one thing which is style.
So you'll see that none of this works unless we have all three of them set.
So the border style there's a few different options.
We can say solid.
I dashed a dotted border.
There's a few others.
Most the time what you see is just solid so solid border five pixels purple.
And we get a border around all the H ones.
There is a nice short cuts and tax that we can use.
So because we often set all three of these at once there is the equivalent syntax that's just called
border.
And we right border colon we give it with 5 pixels the style solid and the color purple.
So I can actually comment these out and you'll see nothing changes.
It's identical.
So let's play the play around a bit.
Let's go with a 8 pixel dasht Forder that is let's just take our R.G. B from down here and we have this
nice dashed border effect.
So you know usually I haven't seen this.
I haven't seen this since websites back in the 90s using this all the time different styles.
Usually all you see is a nice thin one or two pixel solid border.
OK.
So just to recap on border we can set properties individually or we can use the short cuts and tax and
set the with the style and the color.
All in one go