默认情况下背景图像会自动向水平和竖直两个方向平铺，如果不希望不平铺，或者只希望沿一个方向平铺，可以使backgroud-repeat属性来控制，该属性可以取以下4种之一
repeat：沿水平和竖直两个方向平铺，也是默认值；
no-repeat：不平铺，只显示一次；
repeat-x：只沿水平方向平铺；
repeat-y：只沿竖直方向平铺；
回到《
【CSS】【6】CSS学习的一些前提
》的登录界面，里面只有一个背景图像：
而我们的页面中却是整张都是这种图像，怎么做到的呢？
而我们的页面中却是整张都是这种图像，怎么做到的呢？
一、HTML部分
<body>
</body>
</body>
这个HTML页面的body部分是一个空内容，即无内容，此时的页面效果如下：
二、定义CSS部分内容
body
{
background-image:url(login_bg.gif);
}
引用背景图片，缺省值为repeat，沿水平和竖直方向平铺，效果如下：
三、只水平平铺
body
{
background-image:url(login_bg.gif);
bacground-repeat:repeat-x;
}
效果如下：
四、只竖直平铺
body
{
background-image:url(login_bg.gif);
bacground-repeat:repeat-y;
}
效果如下：
五、不平铺
body
{
background-image:url(login_bg.gif);
bacground-repeat:no-repeat;
}
效果如下：
六、HTML部分
在实际应用过程中我们经常会遇到如下问题，背景图像如下：
这是一个渐变过程的图版本，若使用CSS直接引入，则会出现如下效果：
body
{
background-image:url(login_bg.png);
}
图片的高度是到这里的哟~
本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261763，如需转载请自行联系原作者
