萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 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源代碼：
<!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背景圖片縱向平鋪內容占多高背景圖片顯示多高
- 上一頁:CSS等比列放大縮小效果
- 下一頁:css代碼優化的12個技巧
