Colour and background properties


Value color
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   */


Value color | transparent
Initial transparent
Used with all elements
Inherited No, but since the default is transparent, the colour behind will be seen


Value url | none
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
Initial repeat
Used with all elements
Inherited No
Example background-repeat: repeat-y; /* Repeats vertically */


Value scroll | fixed
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.