css background property

Definition and Usage

The background shorthand property sets all background properties in one declaration.

1.background-color : Specifies the background color to be used.

   example:

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

 

2.backgroung-image : Specifies the background image to use.

example:

body
  {
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

3.background-repeat : Set whether and how to repeat the background image, which defines the tiling mode of the image.

Possible values:

Value description

repeat	default. The background image will repeat vertically and horizontally.
repeat-x	The background image will repeat horizontally.
repeat-y	The background image will repeat vertically.
no-repeat	The background image will only be displayed once.
inherit	Specifies that the setting of the background-repeat property should be inherited from the parent element.

example:

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

 4.background-attachment: Set whether the background image is fixed or scrolled with the rest of the page.

Possible values:

scroll	Defaults. The background image moves as the rest of the page scrolls.
fixed	The background image doesn't move when the rest of the page scrolls.
inherit	Specifies that the setting of the background-attachment attribute should be inherited from the parent element.

Example: How to set a fixed background image:

 

body
  {
  background-image: url(bgimage.gif);
  background-attachment: fixed;
  }

 5.background-position : Set the starting position of the background image.

 

Example: How to position the background image:

 

body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

 

Possible values:

top left top center top right center left center center center right bottom left bottom center bottom right	If you specify only one keyword, the second value will be "center". Default: 0% 0%.
x% y%	The first value is the horizontal position and the second value is the vertical position. The upper left corner is 0% 0%. The bottom right corner is 100% 100%. If you specify only one value, the other value will be 50%.
xpos ypos	The first value is the horizontal position and the second value is the vertical position. The upper left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If you specify only one value, the other value will be 50%. You can mix % and position values.

6.background-origin : Specifies the positioning area of ​​the background image.

Note: This property has no effect if the background-attachment property of the background image is "fixed".

grammar:

 

 

background-origin: padding-box|border-box|content-box;

 example:

 

    Position the background image relative to the content box:

 

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

 

7. background-clip:规定背景的绘制区域。

语法：

 

background-clip: border-box|padding-box|content-box;

可能的值：

border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

例：

规定背景的绘制区域：

div
{
background-color:yellow;
background-clip:content-box;
border: 10px dotted #000000;
}