Setting background-image for bootstrap's container from .css file
18,247
I have copied pasted same code you have pasted. But the background image #header class in css class
WORKS FINE.
Here is the code you can copy:
File 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
#header{
background-image: url('../images/trolltunga.jpg');
width: 100%;
height: auto;
background-size: cover;
}
`
Author by
Artanor
Updated on June 04, 2022Comments
-
Artanor almost 2 years
I have a problem with setting background image for bootstrap's container from .css file.
Let's say..
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:
#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:
<div id="header" style="background-image: url('images/banner_header.jpg');">Please help.