What is Colors and Backgrounds
CSS properties allow authors to specify the foreground color and background of an element Backgrounds may be colors or images. Background properties allow authors to position a background image, repeat it, and declare whether it should be fixed with respect to the viewport or scrolled along with the document.
CSS Color Property
The color property specifies the color of text.
Use a background color combined with a text color that makes the text to read.
Example
Set the text color for different elements:
body {
color: red;
}
h1 {
color: #00ff00;
}
p.ex {
color: rgb(0,0,255);
}
CSS background Property
The background property is a shorthand property for:
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
Example
Set different background properties in one declaration:
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
CSS background-color Property
The background-color property sets the background color of an element.
The background of an element is the total size of the element, including padding and border (but not the margin).
Use a background color and a text color that makes the text easy to read.
Example
Set the background color for a page:
body {background-color: coral;}
CSS background-attachment Property
The background-attachment Property Sets whether a background image scrolls with the rest of the page, or is fixed.
Example
A background-image that will not scroll with the page (fixed):
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
CSS background-repeat Property
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.
Example
Repeat a background-image only vertically:
body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}
CSS background-image Property
The background-image property sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
The background of an element is the total size of the element, including padding and border (but not the margin).
Example
Set a background-image for the <body>element:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
Example
Set two background images for the <body> element:
body{
background-image: url("img_tree.gif"),url("paper.gif");
background-color: #cccccc;
}
CSS background-position Property
The background-position property sets the starting position of a background image.
By default, a background-image is placed at the top left corner of an element, and repeated both vertically and horizontally.
Example
How to position a background-image:
body {
background-image: url ('codeone.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
