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源代码：
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>
CSS案例
在线演示 DIVCSS5</title>
<linkhref="images/style.css"rel="stylesheet"type="text/css"/>
<!-- www.divcss5.com -->
</head>
<body>
<divclass="divbox">DIVCSS5实例内容</div>
</body>
</html>
3、案例CSS代码：
@charset "utf-8";
/* DIVCSS5-CSS初始化模板-www.divcss5.com */
body, div {margin:0; padding:0;font-style: normal;font:12px/22px "5B8B4F53",Arial, Helvetica, sans-serif}
/* 5B8B4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul ,li{list-style:none}
body{color:#FFF;
background
:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center}
.divbox{ margin:0 auto; 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 "5B8B4F53",Arial, Helvetica, sans-serif}
/* 5B8B4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul ,li{list-style:none}
html{background:#E2E2E2}/*
CSS注释
说明：对html设置背景颜色 */
body{color:#FFF;background:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center}
.divbox{ margin:0 auto; width:274px; height:200px; background:#00F}
3、案例截图
解决body背景图片纵向平铺内容占多高背景图片显示多高
本文网址：https://www.dedexuexi.com/divcss/jc/1481.html
本站部分文章搜集与网络，如有侵权请联系本站，转载请说明出处。
