1、新建html文件。
2、创建两个div，并赋予id。
3、为两个div设置宽高和背景，并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项：
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
background-position: top left 可以用负值您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作
是用来定位图片的位置的，最主要使用在 一张png 上有多个logo 或者 ico 这个时候就用到background-position了。
background-position：x y x等于平行轴 y等于竖行轴，x y的取值可以为正数，也可以是负数。
background-position: left -29px 是背景位移，background-position后面有两个属性，第一个是水平位置，第二个是垂直方向的位置，这里需注意的是两个属性的顺序
比如：
background-position: left -29px(当中的left指从图片的最左端读起，-29px就是将图片向上移动29px,然后开始读)
扩展资料：语法
background-position : length || length
background-position : position || position
取值
length : 百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
注：设置或检索对象的背景图像位置，必须先指定 background-image 属性，该属性定位不受对象的补丁属性( padding )设置影响。
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角，如果只指定了一个值，该值将用于横坐标，纵坐标将默认为 50% ，如果指定了两个值，第二个值将用于纵坐标。
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位，对应的脚本特性为 backgroundPosition。
