css3背景

1.background-repeat属性设置是否及如何重复背景图像

div:{
	background-repeat:no-repeat; //仅显示一次
	background-repeat:repeat; //默认。背景图像将在垂直方向和水平方向重复。
	background-repeat:repeat-x; //背景图像将在水平方向重复。
	background-repeat:repeat-y; //背景图像将在垂直方向重复。
	background-repeat:inherit; //规定应该从父元素继承 background-repeat 属性的设置。
}

2.background-image属性

<style>
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
或者
#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

</style>

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

3.background-size属性:指定背景图像的大小

div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}
或者伸展背景图像完全填充内容区域：
div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

4.background-origin 属性指定了背景图像的位置区域

div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;//content-box, padding-box,和 border-box
}

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

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; //content-box, padding-box,和 border-box
}