HTML中的div標簽是一個非常強大的容器，它可以用來組織和布局網頁中的各個元素。在設計網頁時，我們經常需要在div中添加圖片作為背景，以便為網頁添加更加生動的視覺效果。下面我們就來學習一下如何使用div設置圖片背景。
首先，我們需要在HTML文件中創建一個div標簽。我們可以通過以下代碼來創建一個id為“bgDiv”的div標簽：
<div id="bgDiv"> </div>接下來，我們需要添加樣式來設置div的寬度、高度以及背景圖片。我們可以通過以下代碼來實現：
<style>
#bgDiv {
width: 100vw; /*寬度設置為瀏覽器窗口的100%*/
height: 100vh;/*高度設置為瀏覽器窗口的100%*/
background-image: url("bg.jpg");/*設置背景圖片*/
background-size:cover; /*將背景圖片放大或縮小以填充div*/
}
</style>在上述代碼中，我們使用了CSS中的background-image屬性來設置div的背景圖片。為了使圖片填充整個div，我們使用了background-size屬性，并將其值設置為cover。
最后，我們只需要將這些代碼放入HTML文件中即可。完整的代碼如下所示：<!DOCTYPE html>
<html>
<head>
<style>
#bgDiv {
width: 100vw; /*寬度設置為瀏覽器窗口的100%*/
height: 100vh;/*高度設置為瀏覽器窗口的100%*/
background-image: url("bg.jpg");/*設置背景圖片*/
background-size:cover; /*將背景圖片放大或縮小以填充div*/
}
</style>
</head>
<body>
<div id="bgDiv">
</div>
</body>
</html>通過以上的步驟，我們就可以輕松地為HTML中的div添加背景圖片了。這種方法不僅能讓網頁看起來更加生動、美觀，同時還有助于提高網頁的用戶體驗和互動性。上一篇css兩張垂直圖片的間距
下一篇html 表格設置背景