CSS中的背景图片方法

Question

Why is'nt the image appearing on my webpage? Can anyone explain me how it works and its solution please?

HTML:
<div class="bg-image"></div>

CSS:
.bg-image {
background-image:url("photo1.jpeg");
width: 400px;
height: 600px;
background-size: cover;
background-repeat: no-repeat;
}

Answer 1

我认为你的图像位置和图片在同一个文件夹中，你可以试试这个 Css 代码吗？

background-image: url("../photo1.jpeg");

如果您使用文件夹，请在 .// 之后添加它们。

background-image: url("../images/photo1.jpeg");

Answer 2

如果您的图片在同一文件夹中，请尝试以下操作：

background-image: url("./photo1.jpeg");

如果不是那么这个：

background-image: url("../folder1/folder2/photo1.jpeg");

并确保没有拼写错误或扩展名错误！

Answer 3

从您的 css 中删除 background-size: cover;。这应该可以解决问题

Answer 4

你也可以用 img src as

<div class="bg-image"><img src="photo1.jpg"></div>

或者您可以简单地使用：

background: url('photo1.jpg') cover no-repeat;

CSS中的背景图片方法

Background image method in CSS

html

css

position

image