1
00:00:00,100 --> 00:00:07,600
In this lecture we'll work with adding backgrounds to elements using the background property to begin.

2
00:00:07,610 --> 00:00:14,990
We'll need to create a file with our basic HDMI structure is shown here once you've created this file.

3
00:00:15,110 --> 00:00:17,750
Save it is backgrounds not HMO

4
00:00:20,890 --> 00:00:27,390
we'll be applying a background to a div so let's go ahead and create our div tags in the body

5
00:00:35,610 --> 00:00:41,790
we'll also need to create an I.D. selector so we can reference the I.D. that will contain the background

6
00:00:41,820 --> 00:00:44,690
declarations for this div.

7
00:00:44,850 --> 00:00:47,380
Let's set that up in our in our style sheet.

8
00:00:47,730 --> 00:01:06,120
So we'll create a style sheet with it with the open and close style tags.

9
00:01:06,120 --> 00:01:09,420
Now let's insert our I.D. we will call it Div 1

10
00:01:18,300 --> 00:01:34,510
now create the following declarations for this I.D..

11
00:01:34,630 --> 00:01:41,060
Most of these declarations should look familiar the background color declaration allows us to set a

12
00:01:41,060 --> 00:01:49,610
background color to an element the value can be a color name as we have here the color blue.

13
00:01:49,850 --> 00:01:53,800
It can be a hexadecimal number or an RG color code.

14
00:01:54,560 --> 00:01:56,650
All three of which we've worked with in the past.

15
00:01:59,690 --> 00:02:03,710
Let's apply this I.D. to our div and preview it in our web browser

16
00:02:14,580 --> 00:02:18,700
so save the file and preview it.

17
00:02:27,200 --> 00:02:35,050
As you can see our div has a blue background as defined in the background color declaration.

18
00:02:35,360 --> 00:02:42,570
In addition to a color background we can also use an image as a background to do this.

19
00:02:42,610 --> 00:02:45,000
We need to use the background image declaration

20
00:02:49,980 --> 00:02:56,970
we'll use the image stored in the downloads folder corresponding to this lecture the image.

21
00:02:57,060 --> 00:03:03,870
The image is a JPEG file and its dimensions are two hundred and four pixels in width by two hundred

22
00:03:03,870 --> 00:03:05,190
and four pixels in height

23
00:03:12,280 --> 00:03:13,990
to add the background image.

24
00:03:13,990 --> 00:03:27,500
We'll need to replace background the background color declaration with background image.

25
00:03:27,570 --> 00:03:36,070
Now we need to indicate the path for this background image and the image is in the same folder as this

26
00:03:36,190 --> 00:03:40,450
HMO document so all I have to do is plug in the name of the file

27
00:03:48,790 --> 00:03:57,850
now save your file again and preview it just to see the change.

28
00:03:57,870 --> 00:04:03,060
This is what your div should look like after adding the background image decoration.

29
00:04:04,750 --> 00:04:11,200
We can see that the background image was applied to our div and also repeated so it fills the entire

30
00:04:11,200 --> 00:04:19,550
div with the specified image let's say we only wanted to repeat the background horizontally or along

31
00:04:19,550 --> 00:04:23,370
the x axis to do this we can use the background.

32
00:04:23,380 --> 00:04:24,760
Repeat declaration

33
00:04:36,540 --> 00:04:37,650
this declaration.

34
00:04:37,650 --> 00:04:44,550
Repeat x as the value will repeat the background only along the x axis

35
00:04:47,960 --> 00:04:48,770
as you can see here

36
00:04:52,130 --> 00:04:58,780
we can do the same vertically by changing the declaration to repeat Y instead of repeat x

37
00:05:08,490 --> 00:05:13,380
if we didn't want the background to repeat at all we would use the no repeat declaration

38
00:05:26,430 --> 00:05:27,050
and this is the.

39
00:05:27,150 --> 00:05:33,100
This is the actual image in the background here is not repeating.

40
00:05:33,330 --> 00:05:39,990
Now say we wanted to specify the position of the background image placement we can do that using the

41
00:05:39,990 --> 00:05:41,420
background position.

42
00:05:41,520 --> 00:05:42,210
Declaration

43
00:05:50,100 --> 00:05:50,830
will center

44
00:05:53,470 --> 00:05:55,570
we'll set the position as center

45
00:06:03,390 --> 00:06:11,470
and we can see that the background now no longer repeats and is also situated in the center of our div.

46
00:06:11,560 --> 00:06:18,400
There are also several other position values you can use as shown at this point you can go ahead and

47
00:06:18,400 --> 00:06:24,100
try different combinations of these declarations to see the effect each one will have on the end result.