①如何设置背景颜色？
在CSS中，background-color就是专门设置背景颜色的。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
.box{
background-color: red;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
--------------------------------------------------------分割线--------------------------------------------------------
②背景图片：
语法格式为：
background-img:url(); （括号中既可以写本地地址也可以写网络地址）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-image: url(http://img5q.duitang.com/uploads/blog/201408/10/20140810150333_3mZzT.thumb.224_0.jpeg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
（此处为网络地址）
--------------------------------------------------------分割线--------------------------------------------------------
③背景平铺：
如果没有特殊的情况下，插入背景图片，如②所示，在横纵方向都是会平铺的。
所以 我们如何控制 背景图片是否需要平铺呢？
这就需要一个特殊的属性：background-repeat: ;
有四个属性：
background-repeat: repeat; 就会横纵方向平铺
background-repeat:no-repeat; 不会横纵方向上平铺
background-repeat: repeat-x; 仅仅在x方向平铺
background-repeat:repeat-y; 仅仅在y方向平铺
这就给我们了一个给整个网页做背景的思路：可以照一张体积比较小的图片，然后在整个页面上进行平铺，这样就会提升页面打开的速度。
背景图片background-image和背景颜色background-color可以同时存在，并且背景图片会覆盖背景颜色。
--------------------------------------------------------分割线--------------------------------------------------------
④背景定位
如何控制背景图片的位置呢？
background-position:水平方向 垂直方向; 这个就是专门用来控制背景图片的位置的。
取值：
1.方向名次
水平方向：left center right
垂直方向：top center bottom
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
div{
width:500px;
height:500px;
}
.box{
border: 3px solid red;
margin: auto;
background-image:url(22.JPG);
background-repeat: no-repeat;
background-color: red;
background-position: left center;
}
</style>
<!--<link type="text/css" rel="stylesheet" href="style/reset.css">-->
</head>
<body>
<div class="box"></div>
</body>
</html>
2.像素
像素也要按照【background-position:水平方向 垂直方向; 】来具体设置值。
指的注意的是：用像素设置值得时候 是可以设置负值的。
--------------------------------------------------------分割线--------------------------------------------------------
⑤ 背景图片和插入图片的区别：
1.背景图片只是作为一个背景来使用，可以在背景图片上面写上一些文字。但是插入的图片却是占用一个位置，不可以在插入的图片上面写文字。
2.背景图片可以通过background-position来随意改变他的位置，但是插入的图片不可以随便改动。
--------------------------------------------------------分割线--------------------------------------------------------
技巧：
图片拼接就用div的嵌套
--------------------------------------------------------分割线--------------------------------------------------------