1
00:00:00,350 --> 00:00:06,000
In this lesson we're going to cover two new properties background which we use to change the background

2
00:00:06,000 --> 00:00:10,120
color or the background image of an element and border.

3
00:00:10,260 --> 00:00:14,670
So we're going to start with background as you can see I have a little example here.

4
00:00:14,670 --> 00:00:16,260
So here's her end result.

5
00:00:16,440 --> 00:00:19,890
Notice that we have a gray background on the body.

6
00:00:20,010 --> 00:00:25,840
Coming from here and then we have a blue background on the div which is coming from here.

7
00:00:26,040 --> 00:00:29,490
And then we also have white text on the paragraph.

8
00:00:29,580 --> 00:00:35,040
So let's go ahead and try this using the About Me page that we've been working with.

9
00:00:35,220 --> 00:00:40,140
And let's go ahead and change the my hobbies h forward and give it a background color.

10
00:00:40,560 --> 00:00:42,460
Let's give it an orange color.

11
00:00:42,900 --> 00:00:47,840
So again we want to select this age four so we type age four.

12
00:00:48,540 --> 00:00:54,990
And then inside the curly braces you're going to say background and we'll do an R G B and we'll make

13
00:00:54,990 --> 00:00:57,230
like a orangey color.

14
00:00:57,260 --> 00:01:04,560
So they'll be a lot of red a little green and the little blue and let's refresh and we get this nice

15
00:01:04,560 --> 00:01:06,670
coral color.

16
00:01:06,780 --> 00:01:11,760
So next let's give the background let's give the body a background which is something you see often

17
00:01:12,120 --> 00:01:15,490
on a Web site where the entire background is a new color.

18
00:01:15,780 --> 00:01:16,830
So let's do some

19
00:01:19,430 --> 00:01:28,590
something like background and let's just say that to be pink for now and then we go the entire background

20
00:01:28,860 --> 00:01:31,290
is pink.

21
00:01:31,290 --> 00:01:36,870
So that is the background property being used to change the color of something.

22
00:01:37,680 --> 00:01:43,650
But we can also use the background property to change the background to be an image which show also

23
00:01:43,650 --> 00:01:44,820
see pretty often.

24
00:01:45,150 --> 00:01:52,680
So the way it works we still specify background but instead of a color we say you Arel and then in parentheses

25
00:01:52,950 --> 00:01:55,760
we give it a u r l where the image is located.

26
00:01:56,190 --> 00:02:04,920
So let's go find some woodgrain let's find an image like this one here.

27
00:02:05,350 --> 00:02:06,980
So let's just copy this image.

28
00:02:07,200 --> 00:02:11,560
You throw in we're going to set that as the background.

29
00:02:12,390 --> 00:02:21,900
So on our body I'm just going to say background you Earl and in that you are Ellett I just copied.

30
00:02:21,900 --> 00:02:23,770
So this will work with any image.

31
00:02:24,050 --> 00:02:32,460
And if we refresh great we see that our background has been set but you'll notice one small thing which

32
00:02:32,460 --> 00:02:35,220
is that our image is not really big enough.

33
00:02:35,220 --> 00:02:41,760
If we go back to it it's not close to being big enough to cover our entire body here.

34
00:02:41,850 --> 00:02:44,100
So what's happened is that it's being tightened.

35
00:02:44,280 --> 00:02:48,900
You can see you know it's being titled tiled horizontally and vertically.

36
00:02:49,320 --> 00:02:53,870
So if we don't want that and sometimes you do but most the time it doesn't look very good.

37
00:02:54,180 --> 00:03:03,220
So if we don't want that there's another property that we can set and that is background repeat.

38
00:03:04,380 --> 00:03:11,530
And if we set this to be no repeat and save.

39
00:03:12,300 --> 00:03:15,720
Now we've set the background of her body and it's not repeating.

40
00:03:16,260 --> 00:03:21,190
But you'll also notice that it's not stretching out to cover the entire body.

41
00:03:21,240 --> 00:03:27,690
So if we wanted to get it to stretch out across the entire screen or across the entire body there's

42
00:03:27,720 --> 00:03:38,230
one other property we can set which is background size and we can set that to cover.

43
00:03:39,240 --> 00:03:42,890
So as you can see it now takes up the entire body.

44
00:03:43,430 --> 00:03:48,600
Of course it's not the best image for this because it's a little blurry it's a little pixilated but

45
00:03:48,630 --> 00:03:54,690
when you're doing a background image usually want to make sure you have something that is either large

46
00:03:54,840 --> 00:04:00,840
and high resolution or something that has a smaller image that can be repeated seamlessly unlike this

47
00:04:00,840 --> 00:04:01,680
one.

48
00:04:01,740 --> 00:04:07,430
It's not you know symmetrical on both axes so if we repeat it it's very clear that there's divisions

49
00:04:07,470 --> 00:04:08,870
and tiling happening.

50
00:04:09,300 --> 00:04:09,600
OK.

51
00:04:09,600 --> 00:04:16,210
So that's background and using background color and background to set a background image.

52
00:04:16,350 --> 00:04:19,460
The next thing I want to show is how we get a border.

53
00:04:19,770 --> 00:04:24,660
So I'm actually going to come at this out because it's a little distracting and let's just go back to

54
00:04:25,320 --> 00:04:27,170
background as pink

55
00:04:30,400 --> 00:04:33,960
and let's go and add borders to all h ones.

56
00:04:34,470 --> 00:04:38,560
So a border and C S has three different parts.

57
00:04:38,700 --> 00:04:43,630
There's the with the color and the style.

58
00:04:45,090 --> 00:04:49,310
So let's start by giving a border color to each one.

59
00:04:49,320 --> 00:04:54,660
It just looks like this border color and that border.

60
00:04:54,780 --> 00:05:01,140
Let's just go with purple and if we refresh we don't actually see anything and that's because currently

61
00:05:01,140 --> 00:05:03,110
our border has no width.

62
00:05:03,150 --> 00:05:05,780
So the next thing we need to do is give it away.

63
00:05:06,120 --> 00:05:10,020
So border with it will just give it a number in pixels.

64
00:05:10,230 --> 00:05:20,270
Let's do five pixels five x refresh and we're still missing one thing which is style.

65
00:05:21,300 --> 00:05:25,920
So you'll see that none of this works unless we have all three of them set.

66
00:05:25,920 --> 00:05:29,060
So the border style there's a few different options.

67
00:05:29,100 --> 00:05:30,810
We can say solid.

68
00:05:31,040 --> 00:05:33,160
I dashed a dotted border.

69
00:05:33,390 --> 00:05:34,470
There's a few others.

70
00:05:34,470 --> 00:05:41,600
Most the time what you see is just solid so solid border five pixels purple.

71
00:05:41,820 --> 00:05:46,490
And we get a border around all the H ones.

72
00:05:47,100 --> 00:05:50,230
There is a nice short cuts and tax that we can use.

73
00:05:50,250 --> 00:05:57,080
So because we often set all three of these at once there is the equivalent syntax that's just called

74
00:05:57,090 --> 00:05:57,940
border.

75
00:05:58,560 --> 00:06:08,040
And we right border colon we give it with 5 pixels the style solid and the color purple.

76
00:06:08,040 --> 00:06:11,760
So I can actually comment these out and you'll see nothing changes.

77
00:06:11,760 --> 00:06:13,350
It's identical.

78
00:06:13,350 --> 00:06:15,410
So let's play the play around a bit.

79
00:06:15,450 --> 00:06:30,110
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

80
00:06:30,120 --> 00:06:32,690
nice dashed border effect.

81
00:06:32,760 --> 00:06:35,050
So you know usually I haven't seen this.

82
00:06:35,310 --> 00:06:40,380
I haven't seen this since websites back in the 90s using this all the time different styles.

83
00:06:40,380 --> 00:06:46,960
Usually all you see is a nice thin one or two pixel solid border.

84
00:06:47,530 --> 00:06:48,010
OK.

85
00:06:48,120 --> 00:06:54,230
So just to recap on border we can set properties individually or we can use the short cuts and tax and

86
00:06:54,240 --> 00:06:58,040
set the with the style and the color.

87
00:06:58,110 --> 00:06:58,900
All in one go