In this lecture we will work with adding backgrounds to elements using the
background-color: color, hexadecimal, rgb, transparent;
background-position: background-repeat: no-repeat, repeat, repeat-x, repeat-y;
To begin, we will need to create a file with our basic html structure.
We will apply our background to a
div, so let's go ahead and create our
<div> tags in the body.
We also need to create an ID Selector, so we can reference the ID that will contain the background properties for this
Setup a style sheet:
Create an ID, named div1.
Create the following declarations, for this ID:
border: 3px solid black;
Most of these declarations should look familiar.
background-color property allows us to set a background color to an element. The value can be a color name, hexadecimal number, or an RGB color code.
Let's apply this ID to our
<div>, and preview it in our web browser. The
<div> has a blue background as defined in the
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 property. We will use the image stored in the downloads folder corresponding to this lecture. The image is a .jpg file, and it's dimensions are: 204px by 204px.
Now type in the following line in id #div1:
background-image: url(bg.jpg);, the url is the path to the image in your website directory.
Save your file again and refresh your browser. 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 along the x-axis. To do this we can use the
Save your file and refresh your browser. We can see the background now repeats only horizontally.
We can do the same vertically by changing the declaration to repeat-y. Let's try It and see the result.
If we did not want the background to repeat at all, we would use the
Now say we wanted to specify the position of the background image placement. We can do this using the
Now save your file and refresh.
We can see that the background is now in the center of the
There are several other position values we can use as shown.
Go ahead and try different combinations of these declarations to see the effect each one will have on the end result.