Programming References and tutorials for Developers.

Adding background using css

By The Saint on Wednesday, January 14, 2009

Filed Under:

Adding background using css

Web page backgrounds used to be usual, but they became unpopular once designers figured out that visitors to web pages didn’t want their eyes wrenched out by flashy tiled background patterns. A good combination of background colors can add text clarity, and readability and attractiveness.
With the help of CSS adding backgrounds is more flexible you can have the control over background image that you append. Changing of positions, and background repetition is easy. The following example will show you on how to do this.

background-color
This property sets the background color of the element. The
page’s body background color has been set to #000000 (which is hex):
body {
background-color: #000000
}

background-image
This property sets a background image for the relevant element:
body {
background-image: url(ProjectUno_background_image.jpg);
}

By using this CSS, you end up with a tiled background

background-repeat
You can have a background image repeat vertically, horizontally, in both directions, or in neither direction. The background-repeat property can accept four values, the default is repeat, creating
the tiled background.

div {
background-image: url(ProjectUno.jpg);
background-repeat: repeat; }
ol {
background-image: url(ProjectUno.jpg);
background-repeat: repeat-x;}
u1 {
background-image: url(ProjectUno.jpg);
background-repeat: repeat-y;}
p {
background-image: url(ProjectUno.jpg);
background-repeat: no-repeat;}

0 comments for this post