css设置body背景图片随内容增加多少显示多少

css设置body背景图片随内容增加多少显示多少经验篇

在CSS布局时，可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺（从上到下居中平铺），此时整个网页无论内容是否占满一屏幕，css背景都会从上到下铺（纵向）满整个屏幕。但有时我们不需要这样的一个效果，需要内容占用多高，body背景就纵向从上到下铺满多少高度。很明显这样就达不到我们想要的效果。

解决方法：
对html再设置个背景（无论图片还是纯色，推荐设置纯颜色的背景颜色）

接下来DIVCSS5通过实例为大家介绍此技巧，首先DIVCSS5分为两个案例，一个是直接对body设置背景图片从上到下平铺，我们会观察到无论网页内容是否占满一屏幕，背景都会从上到下满铺。

一、未解决背景纵向平铺CSS DIV案例 - TOP

1、DIV CSS案例描述
首先对body设置一个背景图片（bg.gif）从上到下平铺，设置一个div盒子宽度为274px,高度为200px; div背景颜色为蓝色。

2、案例HTML源代码：

CSS案例在线演示DIVCSS5
DIVCSS5实例内容

3、案例CSS代码：

@charset"utf-8";
/*DIVCSS5-CSS初始化模板-www.divcss5.com*/
body,div{
    margin:0;
    padding:0;
    font-style:normal;
font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif}
/*\5B8B\4F53代表宋体，更多中文字体转Unicodehttp://www.divcss5.com/jiqiao/j325.shtml*/
ol,ul,li{
list-style:none}
body{
    color:#FFF;
    background:#E2E2E2url(bg.gif)repeat-ycenter0;
text-align:center}
.divbox{
    margin:0auto;
    width:274px;
    height:200px;
background:#00F}
    

4、实例截图

对body设置纵向平铺背景图片显示案例截图

从以上图上看到对body设置背景图片从上到下纵向平铺时，无论内容是否占满1屏幕，其背景都会从上到下都会平铺满整个屏幕，此时就不那么好看了，接下来第二个案例在此基础上进行解决背景随内容占用多个显示多个平铺图片背景。

5、在线演示：查看案例

二、解决内容多高body设置背景图片平铺显示多高 - TOP

1、解决说明
我们只需要在CSS代码中对html加一个背景色即可，当然这个背景设置需要根据布局实际情况而设置，这里因为背景颜色为"#E2E2E2"，此时我们就只需要对html设置一个CSS背景色为"#E2E2E2"即可解决实现完美背景图片纵向从上到下平铺问题。

2、CSS代码：

@charset"utf-8";
/*DIVCSS5-CSS初始化模板-www.divcss5.com*/
body,div{
    margin:0;
    padding:0;
    font-style:normal;
font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif}
/*\5B8B\4F53代表宋体，更多中文字体转Unicodehttp://www.divcss5.com/jiqiao/j325.shtml*/
ol,ul,li{
list-style:none}
html{
background:#E2E2E2}
/*CSS注释说明：对html设置背景颜色*/
body{
    color:#FFF;
    background:#E2E2E2url(bg.gif)repeat-ycenter0;
text-align:center}
.divbox{
    margin:0auto;
    width:274px;
    height:200px;
background:#00F}
    

3、案例截图

解决body背景图片纵向平铺内容占多高背景图片显示多高

以上实现body设置从上到下平铺背景图片随html网页内容占多高显示多高紧贴内容方法，希望对大家有用。

4、在线演示：查看案例

5、完整DIV+CSS案例打包下载

立即下载 （2.982KB）

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！