# background-image

CSS3中可以通过background-image属性添加背景图片。 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
/*119.gif层级高于壁纸！！！写在后面的话会被壁纸遮住！！！*/
#example1 {
    background: url(/beifen/119.gif), url(/beifen/120.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
/*需要的时候也可以合写*/
/*
 background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
 */
</style>
</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci
 tation ullamcorper suscipit lobortis nisl ut aliquip 
 ex ea commodo consequat.</p>
</div>

</body>
</html>

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

# background-size

background-size指定背景图像的大小。

div.size
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

# background-origin

指定了背景图像的位置区域

content-box, padding-box,和 border-box区域内可以放置背景图像。

#div1
{
	background-origin:border-box;
}

# background-clip

background-clip背景剪裁属性是从指定位置开始绘制

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

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

# background合写

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center / cover;

提示

这些参数从左到右依次是：

background-color

background-image

background-repeat

background-attachment

background-position / background-size 一定要注意的是 background-size 是 CSS3 的属性，它要与 background-position 配合使用，中间有一个斜杠分隔符。

没有背景剪裁 (border-box没有定义):