CSS Properties

CSS background property is used to define the background effects on element. There are 5 CSS background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1. Background-color

The background-color property allows to set the background color of an HTML elements. We can set this property to a predefined color name, color value or transparent.

• Color Name - red,green,blue etc
• Color Value -
  Hex Value - #F0E68C
  RGB Value - rgb(240,230,140)

Example:

body{
Background-color:red;
}

2. Background-image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

The background image can also be set for specific elements.

Example:

body{
background-image: url("paper1.jpg");
}

3. Background-repeat

By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

• Horizontal - repeat-x
• Vertical - repeat-y
• No repeat - no-repeat

Example:

body{
Background-image: url(img.jpg);
background-repeat: repeat-x;
}

4. Background-attachment

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser. Let?s take an example with fixed background image.

body{
Background-image: url(img.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
}

5. Background-position

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

body{
Background-image: url(img.jpg);
background-repeat: no-repeat;
background-position:right top;
}