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;
}

Leave a Reply

Your email address will not be published.