In this lecture we'll work with adding backgrounds to elements using the background property to begin.
We'll need to create a file with our basic HDMI structure is shown here once you've created this file.
Save it is backgrounds not HMO
we'll be applying a background to a div so let's go ahead and create our div tags in the body
we'll also need to create an I.D. selector so we can reference the I.D. that will contain the background
declarations for this div.
Let's set that up in our in our style sheet.
So we'll create a style sheet with it with the open and close style tags.
Now let's insert our I.D. we will call it Div 1
now create the following declarations for this I.D..
Most of these declarations should look familiar the background color declaration allows us to set a
background color to an element the value can be a color name as we have here the color blue.
It can be a hexadecimal number or an RG color code.
All three of which we've worked with in the past.
Let's apply this I.D. to our div and preview it in our web browser
so save the file and preview it.
As you can see our div has a blue background as defined in the background color declaration.
In addition to a color background we can also use an image as a background to do this.
We need to use the background image declaration
we'll use the image stored in the downloads folder corresponding to this lecture the image.
The image is a JPEG file and its dimensions are two hundred and four pixels in width by two hundred
and four pixels in height
to add the background image.
We'll need to replace background the background color declaration with background image.
Now we need to indicate the path for this background image and the image is in the same folder as this
HMO document so all I have to do is plug in the name of the file
now save your file again and preview it just to see the change.
This is what your div should look like after adding the background image decoration.
We can see that the background image was applied to our div and also repeated so it fills the entire
div with the specified image let's say we only wanted to repeat the background horizontally or along
the x axis to do this we can use the background.
Repeat declaration
this declaration.
Repeat x as the value will repeat the background only along the x axis
as you can see here
we can do the same vertically by changing the declaration to repeat Y instead of repeat x
if we didn't want the background to repeat at all we would use the no repeat declaration
and this is the.
This is the actual image in the background here is not repeating.
Now say we wanted to specify the position of the background image placement we can do that using the
background position.
Declaration
will center
we'll set the position as center
and we can see that the background now no longer repeats and is also situated in the center of our div.
There are also several other position values you can use as shown at this point you can go ahead and
try different combinations of these declarations to see the effect each one will have on the end result.