The Background properties are used to set the background color, background image. It also helps to repeat the background and make background scroll with the contents etc.
We’ll be covering the following topics in this tutorial:
CSS Background-Color
The BACKGROUND-COLOR property is used to specify the background color of an element. The values that can be assigned to it are specified using their color values, hexadecimal code values, RGB value or using short hexadecimal code values. You can also specify transparent value that indicates no color is being used.
p { Background-Color: Red ;} h1 {Background-Color: #FF0066;} BODY {Background-Color: rgb(20, 33, 66);}
CSS Background-Image
The BACKGROUND- IMAGE property is used to specify the background image of an element. The possible values that can be assigned to it are none or url of an image.
In order to assign an image some value, the URL of an image is enclosed in brackets which is preceded by the keyword URL. For example:
Body{background-image : url(images/pic.gif);} P{background-image : none;}
CSS Background-Repeat
The BACKGROUND-REPEAT property is an important background property. When ‘you specify the background image then it tiles horizontally as well as vertically across the entire area available to it. The Background-repeat property controls whether the background image is repeated or not. If also determines how it should be repeated. The possible values are.
Value Purpose
repeat (default) causes an image to repeat horizontally as well as vertically over the whole page.
repeat-x causes an image to be repeated horizontally.
repeat-y causes image to be repeated vertically.
no- repeat Image will not be repeated i.e. appears only once.
For example:
Body { background-image : url(images/pic.gif); Background-Repeat : repeat-x; }CSS Background-Attachment
If the background image is specified then background-attachment property determines whether to scroll the background image or fix it relative to the page contents. This is commonly known as watermark. The possible values are:
Value Purpose
Fixed Image does not move if the user scrolls up and down.
Scroll (default) Image moves as the user scrolls up and down.
For example:
Body { background-image : url(images/pic.gif); background-attachment: Fixed; }CSS Background-Position
If the background image is specified, the background-position property determines the position of the background image. The possible values that can be assigned to it can be in terms so of percentage or length. You can also use keywords such as top, center, bottom, left and right. The default value is 0%0% (Upper Left corner).
Value Purpose
x%y% Percentage along x and y-axis
xy Absolute length along x and y axis
For example:
Body { background-image : url(images/pic.gif); background-position: 50% 40%; } P { background-image : url(images/pic.gif); background-position: 3cm 3cm; }
The keywords top, bottom, center represent the vertical position and left, center, right represent the horizontal position. These can be used in combination to represent the background image position. For example:
Body { background-image : url(images/pic.gif); background-position: top left; }Example:
<html> <head> <title>working of color & background attributes</title> <style type == "text/css"> h1 {font-family: comic sans ms; font-size:25; background-image: url(c:\mydocuments\dhtml\images\passport.jpg)} h2 {font-ea.mil y: comic sans ms; font -size: 25; background-image: url(c:\mydocuments\dhtml\images\passport.jpg) background-repeat:no-repeat} p {font-size: 12pt; font-style:italic; color:green; background-color:#ff3366 background-position:bottom-left} </style> </head> <body> <br><center> <h2>cascading style sheets.</h2></center><br> <u>effects with background repeat</u> <hl>the cascading style sheets (css).</h1> <p>the cascading style sheets (css) made the dhtml a powerful tool that is used to develop attractive web pages, which grab the immediate attention from the user. we can make changes globally in a web page with the help of dhtml.</p><br> <u>effects with background no-repeat</u> <h2>the cascading style sheets (css)</h2> </body> </html>
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular