Html 背景图像不'；I don’我不会出现在沙发上_Html_Css_Background_Show

Html 背景图像不'；I don’我不会出现在沙发上

html css

Html 背景图像不'；I don’我不会出现在沙发上,html,css,background,show,Html,Css,Background,Show,它甚至没有出现在Chrome Inspector中。我做错了什么，但不知道是什么 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title> <meta name="viewport" c

它甚至没有出现在Chrome Inspector中。我做错了什么，但不知道是什么

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>Trio - Bootstrap Responsive Agency/Portfolio HTML5 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS & Favicon -->
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/stylesheet.css">
    <!-- scripts -->
</head>
<body>
  <div class="wrapper">
    <header>
      <div id=="container header_div">
        &nbsp;
      </div>
    </header>
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

我在css中添加了所有的背景属性，div有一个大小

我的文件结构如下：

我以前也遇到过类似的问题。这就是我所做的。我将div背景设置为

background:url（“./images/header_background.jpg”）
我以前也遇到过类似的问题。这就是我所做的。我将div背景设置为background:url（“./images/header_background.jpg”）
在css中不存在
，请更改为
主体{宽度：100%；高度：100%；位置：相对；}
标题{高度：100vh；}
#标题室{
背景图片：url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
背景位置：中心；
背景尺寸：封面；
}

Trio-引导响应机构/组合HTML5模板
在css中不存在
，请更改为
主体{宽度：100%；高度：100%；位置：相对；}
标题{高度：100vh；}
#标题室{
背景图片：url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
背景位置：中心；
背景尺寸：封面；
}

Trio-引导响应机构/组合HTML5模板
我发现了几个可能导致问题的因素：
这里有两个相等值：。应该
单身。此外，我在id中看到两个单词，用
空间ID不能像类一样链接，这是无效的
语法。由于设置了#header_div的样式，因此div上的id属性
应为id=“header\u div”
图像的相对路径以两个点开始。因此，您将跳出当前目录。由于您的图像文件夹位于
与page.html目录相同，文件路径应为：
url（/images/header\u background.jpg）
要查看图像，还需要在#header_div元素中声明高度
通过这样做，我能够在测试中看到背景图像。我希望这能有所帮助。
我发现有几件事会导致这个问题：
这里有两个相等值：。应该
单身。此外，我在id中看到两个单词，用
空间ID不能像类一样链接，这是无效的
语法。由于设置了#header_div的样式，因此div上的id属性
应为id=“header\u div”
图像的相对路径以两个点开始。因此，您将跳出当前目录。由于您的图像文件夹位于
与page.html目录相同，文件路径应为：
url（/images/header\u background.jpg）
要查看图像，还需要在#header_div元素中声明高度
通过这样做，我能够在测试中看到背景图像。我希望这能有所帮助。
试试背景图像：url（'images/header_background.jpg'）。您在
中也有输入错误。只有一个=
感谢您的评论，但它不起作用。[link]您不能为一个元素分配多个ID。试试背景图片：url（'images/header_background.jpg'）。您在
中也有输入错误。只有一个=
感谢您的评论，但它不起作用。[link]您不能为一个元素分配多个ID。我认为，因为它是相对于css的位置的，所以在我的例子中应该是../images/header_background.jpg，但它不起作用（我相信，因为它是相对于css的位置的，所以在我的例子中它应该是../images/header_background.jpg，但它不起作用。：（谢谢！：）我已经设法通过您对HTML和css的更正来显示它：body{width:100%；height:100%；position:relative；}header{height:100vh；}header#div{background image:url（'../images/header_background.jpg'）；背景位置：中心；背景大小：cover；}
谢谢！：）我已经通过您对HTML和CSS的更正来显示它：body{width:100%；height:100%；position:relative；}header{height:100vh；}header#div{背景图像：url（'../images/header_background.jpg'）；背景位置：中间；背景大小：cover；}
body {width: 100%; height: 100%; position: relative;}
header {height: 100vh;}
#header_div {
    background-image: url(../images/header_background.jpg);
    background-position: center;
    background-size: cover;
}