Colour and background properties


Value color | inherit
Initial depends on the program used
Used with all elements
Inherited yes
Used to set the text color, and can be specified in two ways:
  color: colourname
  color: rgb(red,green,blue) 
        /* red, green, blue are integers in the range 0-255   */
See the Terms page of this guide for a list of values for colourname.


Value color | transparent | inherit
Initial transparent
Used with all elements
Inherited No, but since the default is transparent, the colour behind will be seen
Example H1 {background-color : rgb(70%,70%,0%) }


Value url | none | inherit
Initial none
Used with all elements
Inherited No
Example BODY { background-image: url(picture.gif) }
This property replaces the background colour with an image.


Value repeat | repeat-x | repeat-y | no-repeat | inherit
Initial repeat
Used with all elements
Inherited No
Example background-repeat: repeat-y; /* Repeats vertically */


Value scroll | fixed | inherit
Initial scroll
Used with all elements
Inherited No
Determines whether the background scrolls with the image, or is "watermarked" onto the screen.
    background-image: url(imagefilename);
    background-attachment: fixed;


Value :
or :
[top | center | bottom] [left | center | right]
[percentage | length ] [percentage | length]
Initial 0% 0%
Used with block-level and replaced elements
Inherited No
Percentages values Percentage distance across the element, with 0% being the left or top.
Examplesbackground-position: 0% 2cm;
background-position: 100%;
background-position: 100% 100%;

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. Negative positions are allowed.

If the background image is fixed to the screen, the placement is relative to the screen instead of the element.


Value background-color || background-image || background-repeat || background-attachment || background-position
Used with all elements
Inherited No
Example P{ background: url(picture.gif) white 20% repeat fixed}
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.