无法将图像作为css的背景[重复]答案

【问题标题】：Can't put an image as background on css [duplicate]无法将图像作为css的背景[重复]
【发布时间】：2020-02-13 08:37:20
【问题描述】：

我一直在尝试将图像作为背景，但由于某种原因，它不起作用。

您将在下面找到我的HTML 和CSS。图片名称为Background，大小为1280*720。

HTML：

<!DOCTYPE html>
    <html>
      <head>
              <title></title>
              <link rel="stylesheet" type="text/css" href="test.css">


        </head>
        <body >

            <header>

            </header>






            <footer></footer> 

        </body>      

    </html>

CSS:

body {
background: url("C:\Users\pro tech\Desktop\site web\Nouveau dossier: background.jpeg") no-repeat;

background-size: cover;
}

【问题讨论】：

图片的网址看起来很不对；你能展示一下你的项目的文件结构吗？
@Deepak 我尝试在内容更多但仍然存在相同问题的正文上进行此操作

标签： html css

【解决方案1】：

图片 url 应该是相对于你的 css 文件而不是你的桌面。或者在你的情况下相对于 html 文件，因为你有内联 css。

网址不正确。

应该是……

背景：url("/images/background.jpeg")

【讨论】：

【解决方案2】：

背景图片的 url 需要从该 CSS 文件所在的位置开始。如果你需要返回一个文件夹，你可以使用../，这让我想到了我的下一件事：确保你使用的是正斜杠而不是反斜杠。

示例：如果您的桌面上现在有 CSS 文件，您的路径将如下所示： url("site%20web/Nouveau%20dossier/background.jpeg");

【讨论】：

【解决方案3】：

可能是因为网址链接上有空格？尝试将空白网址替换为 %20

body {
background: url("C:\Users\pro%20tech\Desktop\site%20web\Nouveau dossier\background.jpeg") no-repeat;

background-size: cover;
}

或者只是删除详细URL，如果图像与html和css在同一文件夹中，则使用图像文件名

body {
background: url("background.jpeg") no-repeat;

background-size: cover;
}

【讨论】：

【解决方案4】：

将图像放在您拥有索引和 Css 的同一文件夹中，然后将 css 添加到文件的新位置：

例如：

body {
background : URL("./image.jpeg") no-repeat;
}

【讨论】：

【解决方案5】：

您需要为正文添加一些高度或内容。现在高度是 0px 所以背景图片没有显示

【讨论】：