HTML and CSS Reference
In-Depth Information
BASIC PROPERTIES
Background color
The
background-color
property fills the background with a solid color.
There are a number of ways to specify the color. The follow commands all
have the same output:
background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;
The
background-color
property can also be set to
transparent
, which
makes any elements underneath it visible instead.
Background image
The
background-image
property allows you to specify an image to be
displayed in the background. This can be used in conjunction with
background-color
, so if your image is not tiled, then any space that the
image doesn't cover will be set to the background color. Again, the code is
very simple. Just remember that the path is relative to the style sheet. So, in
the following snippet, the image is in the same directory as the style sheet:
background-image: url(image.jpg);
But if the image was in a sub-folder named
images
, then it would be:
background-image: url(images/image.jpg);
Background repeat
By default, when you set an image, the image is repeated both horizontally
and vertically until the entire element is filled. This may be what you want,
but sometimes you want an image to be displayed only once or to be tiled in
only one direction. The possible values (and their results) are as follows:
background-repeat: repeat; /* The default value. Will tile
the image in both directions. */
