Background Properties
In CSS background properties lets you set the background color for a web page and an image for the background. With the image background you are able to position the image, and also repeat the image horizontally or vertically.
Examples
Background Color:
Quote:
body {background-color: blue} -> Color Name Value
body {background-color: #0000FF} -> Hexadecimal Values
body {background-color: rgb(0,0,255)} -> RGB Values
|
All of these properties do the same thing, they set the background color of the web page to blue. People have a choice of how they assign their value.
Note: A link to
CSS Color Values
Background Image:
Quote:
<style type="text/css">
body {background-image: url('waterbg.jpg')}
</style>
|
This basically assigns the image from the given URL, the URL is placed between brackets after the text '
url' as shown in the example.
Repeating a Background Image:
Quote:
<style type="text/css">
body {background-image: url('waterbg.jpg');
background-repeat: repeat-x}
</style>
|
This background image is repeated horizontally, to repeat the image vertically simply replace
repeat-x with
repeat-y.
Quote:
<style type="text/css">
body {background-image: url('waterbg.jpg');
background-repeat: repeat}
</style>
|
This repeats the image horizontally and also vertically.
Background Position:
The property for positioning images on backgrounds is;
background-position. The values for background-position can be in the form of percentages (e.g.
background-position: 100% 50%), length (e.g.
background-position: 0px 30px), and keywords (e.g.
background-position: right center). In all cases the horizontal position is specified first and the vertical position second. So for example the values
100% 0% will be positioned on the top right corner of the page.
Single Image on a Background:
Quote:
<style type="text/css">
body { background-image: url('circle.gif');
background-repeat: no-repeat;
background-position: center; }
</style>
|
With this a single image, in this case a little circle would appear in the center of the page.
To have the image fixed at a certain point so it will not scroll with the rest of the page, just add this property to the body selector;
background-attachment: fixed.
This link directs to a table that contains most background properties and values:
CSS Background Properties Table