背景图像不起作用

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;
}