Full body background with Twitter Bootstrap
I am trying to work on a new project using Twitter's Bootstrap framework, but I am having an issue. I want a full body background, yet the background seems to be limited to 开发者_StackOverflowthe height of the container div. here is the HTML/CSS code:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
How can I get the body to take up the entire screen?
You need to either add this:
html { background: transparent }
Or, set the "page background" (background: black) on html instead, which is fine to do.
Why? Inside Bootstrap, there's this:
html,body{background-color:#ffffff;}
(bear in mind the default background value is transparent)
For more information on why this matters, see: What is the difference between applying css rules to html compared to body?
Note that this is no longer an issue with Bootstrap 3+.
Set the height of html and body to be 100% in the CSS.
html, body { height: 100%; }
Then it should work. The problem is that the height of body is automatically calculated to be the height of the contents, rather than the height of the whole screen.
/* here is a pure CSS solution */
<style type="text/css">
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
a:link, a:visited, a:hover {
color: #333;
font-style: italic;
}
a.to-top:link,
a.to-top:visited,
a.to-top:hover {
margin-top: 1000px;
display: block;
font-weight: bold;
padding-bottom: 30px;
font-size: 30px;
}
</style>
<body>
<img src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
this works for a background image if you want it
best solution would be
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
its automatically take veiwport height(vh) in bootstrap.
加载中,请稍侯......
精彩评论