在網頁設計的過程中，有時候可能會要求背景圖檔平鋪，因為這樣會讓整個網頁看起來比較好看，圖檔平鋪可以不用具體設定body寬度和高度大小，就可以直接将圖檔平鋪整個頁面，那麼，如何讓背景圖檔平鋪呢？接下來本篇文章将給大家來介紹關于css讓背景圖檔平鋪的方法，有需要的朋友可以參考一下。
打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）
我們首先來看一下css設定背景圖檔平鋪方式。
- repeat：即預設方式，完全平鋪背景；
- no-repeat：在X及Y軸方向均不平鋪；
- repeat-x：橫向平鋪背景；
- repeat-y：縱向平鋪背景。
下面我們就來看一下css的這四種背景圖檔平鋪的實作代碼。
css背景圖檔平鋪之完全平鋪背景的代碼：
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>
css背景圖檔平鋪效果如下：
css背景圖檔平鋪之在X及Y軸方向均不平鋪：
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>
css背景在X及Y軸方向均不平鋪效果如下：
css背景圖檔平鋪之橫向平鋪背景：
背景圖檔現在隻在X軸即橫向進行了平鋪操作，縱向并沒有進行平鋪
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-x;
}
</style>
<div id="content">
</div>
</body>
</html>
css橫向平鋪背景效果如下：
css背景圖檔平鋪之縱向平鋪背景：
背景圖檔現在隻在Y軸即橫向進行了平鋪操作，橫向并沒有進行平鋪
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-y;
}
</style>
<div id="content">
</div>
</body>
</html>
css縱向平鋪背景效果如下：
以上就是本篇文章的全部内容了，更多精彩内容可以關注我！！！！！！！！