在網頁設計的過程中，有時候可能會要求背景圖片平鋪，因為這樣會讓整個網頁看起來比較好看，圖片平鋪可以不用具體設置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縱向平鋪背景效果如下：
以上就是本篇文章的全部內容了，更多精彩內容可以關注我！！！！！！！！
