twitter-bootstrap 从 .css 文件为 bootstrap 的容器设置背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41768382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting background-image for bootstrap's container from .css file
提问by Artanor
I have a problem with setting background image for bootstrap's container from .css file.
我在从 .css 文件为 bootstrap 的容器设置背景图像时遇到问题。
Let's say..
让我们说..
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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"></script>
</head>
<body>
<header>
<div id="header">
<div class="container">
<div class="row">
<div class ="col-xs-6" id="logo">
<img src="images/logo_png.png" alt="logo">
</div>
<div class ="col-xs-6" id="menu">
<nav id="menu_nav">
<ul id="menu_nav_ul">
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOW IT WORKS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
And CSS:
和 CSS：
#header{
background-image: url('../images/banner_header.jpg');
width: 1598px;
height: 888px;
background-size: cover;
}
It's not working, I don't know why.
它不起作用，我不知道为什么。
When I'm trying to do it directly from .html file it works fine, like:
当我尝试直接从 .html 文件执行此操作时，它工作正常，例如：
<div id="header" style="background-image: url('images/banner_header.jpg');">
Please help.
请帮忙。
回答by Pavan Baddi
I have copied pasted same code you have pasted. But the background image #header classin css class
我已经复制粘贴了您粘贴的相同代码。但是#header classcss类中的背景图片
WORKS FINE.
工作正常。
Here is the code you can copy:
这是您可以复制的代码：
File HTML :
文件 HTML :
<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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"></script>
</head>
<body>
<header>
<div id="header">
<div class="container">
<div class="row">
<div class ="col-xs-6" id="logo">
<img src="images/logo_png.png" alt="logo">
</div>
<div class ="col-xs-6" id="menu">
<nav id="menu_nav">
<ul id="menu_nav_ul">
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOW IT WORKS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
CSS FILE style.css inside folder style
CSS FILE style.css 文件夹内样式
#header{
background-image: url('../images/trolltunga.jpg');
width: 100%;
height: auto;
background-size: cover;
}
`
`
回答by lukast94
It seems to work for me.
它似乎对我有用。
background-image: url('../images/banner_header.jpg');
Project setup
项目设置
> Project
index.html
> images
banner_header.jpg
> style
style.css
Something must be wrong within your project folder. Maybe wrong name, missing file. Check if your style.cssis in your stylefolder. Just setup your folder as I did above, and it should work.
您的项目文件夹中一定有问题。可能名称错误，文件丢失。检查您style.css是否在您的style文件夹中。就像我上面那样设置你的文件夹，它应该可以工作。
