背景图片未显示在div中
[英]Background-image doesn't show up in a div
问题描述
It doesn't even show up in the Chrome Inspector. 
它甚至没有显示在Chrome Inspector中。 I am doing something wrong but don't know what. 我做错了事，但不知道怎么办。
<!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">
</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>
And the CSS is: CSS是：
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;
}
I have added all of the background-properties in the css and the div has a size. 我在css中添加了所有background-properties，并且div具有大小。
My file structure is like this: 我的文件结构是这样的：
3 个解决方案
解决方案1
2 2017-01-21 21:25:33
I see several things that can cause the issue: 我看到可能导致此问题的几件事：
- There is double equal here:
<div id=="container header_div">.这里有两个等于： <div id=="container header_div">。 Should be single.应该是单身。 In addition, I see two words in the id separated by space. 另外，我在id中看到两个单词，以空格分隔。 ID's cannot be chained like classes, and this is not a valid syntax. ID不能像类一样链接，这不是有效的语法。 Since you style #header_div, the id attribute on the div should be id = "header_div". 由于您设置了#header_div的样式，因此div上的id属性应为id =“ header_div”。 - The relative path to the image starts with two dots. 图像的相对路径以两个点开始。 As a result, you step out of the current directory. 结果，您退出了当前目录。 Since your images folder is in the same directory as the page.html, the filepath should be: url(/images/header_background.jpg); 由于您的图片文件夹与page.html位于同一目录中，因此文件路径应为：url（/images/header_background.jpg）;
- To see the image you would need to declare the height in the #header_div element as well. 要查看图像，您还需要在#header_div元素中声明高度。
By doing this, I was able to see a background image in my test. 这样，我可以在测试中看到背景图像。 I hope this helps. 我希望这有帮助。
解决方案2
1 已采纳 2017-01-21 20:50:16
Not exist <div id="container header_div"> in you css, change to <div id="header_div"> 在您的CSS中不存在<div id="container header_div"> ，请更改为<div id="header_div">
body {width: 100%; height: 100%; position: relative;} header {height: 100vh;} #header_div { background-image: url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg); background-position: center; background-size: cover; }
<!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="header_div"> </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>
解决方案3
0 2017-01-21 20:47:30
I had a similar issue like this before. 我以前有类似的问题。 This is what I did. 这就是我所做的。 I set the div background to just this background: url("./images/header_background.jpg"); 我将div背景设置为此background: url("./images/header_background.jpg");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.