Mozilla.com

  1. MDC
  2. Main Page
  3. CSS-2 Quick Reference
  4. Color and Background
Table of contents
No headers

color : color;
S: All

  • color : color-name | color-value
    • color-name : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.
    • color-value : rgb values in one of this formats, #336699, #369, rgb(51,102,153), rgb(30%,60%,100%).
  • Examples
    • color: #ff0000;
    • color: #fff;
    • color: #ff0000;
    • color: rgb(0,255,0);

background-color : color | transparent;
B: NS4 S: IE4+ NS6+ O3.5+ Gecko

  • color : see above.
  • Examples
    • background-color: #ff0000;
    • background-color: transparent;

background-image : uri | none;
B: NS4 S: IE4+ NS6+ O3.5+ Gecko

  • uri : a valid Uniform Resource Identifier, double quoted or not.
  • Examples
    • background-image: url(./img/metal.png);
    • background-image: url("wood.png");
    • background-image: none;

background-repeat : repeat | repeat-x | repeat-y | no-repeat;
B: IE4 MacIE4 S: IE5+ MacIE5+ NS6+ O3.5+ Gecko

  • repeat : background image is tiled in both X and Y direction.
  • repeat-x : background image is tiled only in X direction.
  • repeat-y : background image is tiled only in Y direction.
  • no-repeat : background image is not tiled.
  • Examples
    • background-repeat: no-repeat;
    • background-repeat: repeat-y;

background-attachment : scroll | fixed;
B: NS4 S: IE4+ NS6+ O3.5+ Gecko

  • scroll : background image scrolls along with the containing block.
  • fixed : background is fixed with respect to viewport.
  • Examples
    • background-attachment: fixed;
    • background-attachment: scroll;

background-position : [percentage | length | left | center | right] [percentage | length | top | center | bottom]  ;
B: NS4 S: IE4+ NS6+ O3.5+ Gecko

  • percentage : position in percentage from left/top border.
  • length : absolute position from left/top border.
  • Tips and FAQs
    • When two length values are specified, the first is for horizontal position.
    • right bottom is equivalent to 100% 100%.
    • If background-attachment is scroll, position is relative to padding border, else if it is fixed, position is relative to viewport.
  • Examples
    • background-position: right top;
    • background-position: 100% 100%;

background : background-color background-image background-repeat background-attachment background-position;
S: All

  • Examples
    • background: red;
    • background: #ffffff url("mybkg.png") repeat-y fixed 50%;
    • background: #000000 url("flag.png") no-repeat right top;

Page last modified 12:45, 10 Aug 2005 by Nickolay

Files (0)