Property: |
background |
Values: |
<background-color>, <background-image>,
<background-repeat>, <background-attachment>, <background-position> |
Initial: |
not defined for shorthand properties |
Inherited: |
no |
The 'background' property is a shorthand property for setting the individual
background properties (i.e., 'background-color', 'background-image',
'background-repeat', 'background-attachment' and 'background-position') at the
same place in the style sheet.
Possible values on the 'background' properties are the set of all possible
values on the individual properties.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
The 'background' property always sets all the individual background
properties. In the first rule of the above example, only a value for
'background-color' has been given and the other individual properties are set to
their initial value. In the second rule, all individual properties have been
specified.
Property: |
background-attachment |
Values: |
scroll, fixed |
Initial: |
scroll |
Inherited: |
no |
If a background image is specified, the value of 'background-attachment'
determines if it is fixed with regard to the canvas or if it scrolls along with
the content.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 core: UAs may treat 'fixed' as 'scroll'. However, it is
recommended they interpret 'fixed' correctly, at least on the HTML and BODY
elements, since there is no way for an author to provide an image only for those
browsers that support 'fixed'.
Property: |
background-color |
Values: |
<color>, transparent |
Initial: |
transparent |
Inherited: |
no |
This property sets the background color of an element.
H1 { background-color: #F00 }
Property: |
background-image |
Values: |
<url>, none |
Initial: |
none |
Inherited: |
no |
This property sets the background image of an element. When setting a
background image, one should also set a background color that will be used when
the image is unavailable. When the image is available, it is overlaid on top of
the background color.
BODY { background-image: url(marble.gif) }
P { background-image: none }
|
background-position |
Values: |
<percentage>, <length>, top, center, bottom, left,
center, right |
Initial: |
0% 0% |
Inherited: |
no |
If a background image has been specified, the value of 'background-position'
specifies its initial position.
With a value pair of '0% 0%', the upper left corner of the image is placed in
the upper left corner of the box that surrounds the content of the element
(i.e., not the box that surrounds the padding, border or margin). A value pair
of '100% 100%' places the lower right corner of the image in the lower right
corner of the element. With a value pair of '14% 84%', the point 14% across and
84% down the image is to be placed at the point 14% across and 84% down the
element.
With a value pair of '2cm 2cm', the upper left corner of the image is placed
2cm to the right and 2cm below the upper left corner of the element.
If only one percentage or length value is given, it sets the horizontal
position only, the vertical position will be 50%. If two values are given, the
horizontal position comes first. Combinations of length and percentage values
are allowed, e.g. '50% 2cm'. Negative positions are allowed.
One can also use keyword values to indicate the position of the background
image. Keywords cannot be combined with percentage values, or length values. The
possible combinations of keywords and their interpretations are as follows:
- 'top left' and 'left top' both mean the same as '0% 0%'.
- 'top', 'top center' and 'center top' mean the same as '50% 0%'.
- 'right top' and 'top right' mean the same as '100% 0%'.
- 'left', 'left center' and 'center left' mean the same as '0% 50%'.
- 'center' and 'center center' mean the same as '50% 50%'.
- 'right', 'right center' and 'center right' mean the same as '100% 50%'.
- 'bottom left' and 'left bottom' mean the same as '0% 100%'.
- 'bottom', 'bottom center' and 'center bottom' mean the same as '50%
100%'.
- 'bottom right' and 'right bottom' mean the same as '100% 100%'.
Examples:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
If the background image is fixed with regard to the canvas (see the
'background-attachment' property above), the image is placed relative to the
canvas instead of the element. E.g.:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
In the example above, the image is placed in the lower right corner of the canvas.
Property: |
background-repeat |
Values: |
repeat, repeat-x, repeat-y, no-repeat |
Initial: |
repeat |
Inherited: |
no |
If a background image is specified, the value of 'background-repeat'
determines how/if the image is repeated.
A value of 'repeat' means that the image is repeated both horizontally and
vertically. The 'repeat-x' ('repeat-y') value makes the image repeat
horizontally (vertically), to create a single band of images from one side to
the other. With a value of 'no-repeat', the image is not repeated.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
In the example above, the image will only be repeated vertically.
ex: body {background-image:url(../Data/gnu.jpg);
background-repeat:no-repeat;
background-position:center}
|
