Color and Background

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;