首先可以学习Gxl网相关的免费课程
1. 学习《CSS 0基础入门教程》中的 CSS背景 章节课程
2. 观看《黑马程序员css视频教程》中的 背景和边距 视频课程
background-position属性用法
1. css background-position属性
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
2. background-position百分比原理
对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。
对background-position很自然的以为百分比是根据父元素宽度计算的，但background-position真的不是，它有一套自己的原理。
3. CSS中background-position的使用
两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。
4. css使用background-position属性来完成雪碧图的代码详解
雪碧图就是CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，就是把多张小图标合并到一张图片上，然后用css的background-position来显示需要显示的部分。
可以减少加载网页图片时对服务器的请求次数，提高页面的加载速度，解决IE6鼠标滑过时出现闪白的现象。
5. background系列之你不知道的background-position
我们知道 background-position 是用来指定背景图像的偏移值的，能让一张图从特定的位置开始展现。而 CSS Sprites 就是通过将多个小图拼接成一张大图，然后利用 background-position 来指定需要显示的区域，以此达到合并HTTP请求的预期。
相关问答
1. background-position截取图片后会有个边框去不掉
2.background-position使用疑惑。
3. 关于background-position百分比的问题？
【相关推荐】
1. Gxl网免费教程：《CSS 在线手册》
2. Gxl网免费视频教程：《弹指间学会HTML视频教程》
3. Gxl网免费视频教程：《php.cn独孤九贱（2）－css视频教程》
下载本文