背景圖像不工作

Question

HTML

<div id="home"></div> 

CSS

#home{background-image:url("img/me.jpg");} 

如上我的代碼不工作。我檢查了文件夾「img」與我的index.html具有相同的位置。

Answer 1

您的<div>沒有內容，也沒有尺寸（寬/高）。

另外，檢查路徑。我會從根開始並從那裏建立它。即/img/me.jpg。

Answer 2

你需要給元素一個寬度和高度。另外，您的源路徑可能關閉。您還應該添加以下內容來控制背景圖像的顯示方式。下面將顯示100％視口高度和100％寬度的圖像。基本上，全屏。

HTML

<div id="home"></div> 

CSS

#home { 
    height: 100vh; 
    width: 100%; 
    background:url('../img/me.jpg') no-repeat; 
    background-position: center; 
    background-size: cover; 
}