css - color - Todo el cuerpo de fondo con Twitter Bootstrap
tooltip bootstrap (5)
Estoy tratando de trabajar en un nuevo proyecto usando el framework Bootstrap de Twitter, pero estoy teniendo un problema. Quiero un fondo de cuerpo completo, sin embargo, el fondo parece estar limitado a la altura del contenedor div. aquí está el código HTML / CSS:
<!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>
¿Cómo puedo hacer que el cuerpo ocupe toda la pantalla?
/ * aquí hay una solución de CSS pura * /
<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>
Establezca la altura de html y body para que sea 100% en el CSS.
html, body { height: 100%; }
Entonces debería funcionar. El problema es que la altura del cuerpo se calcula automáticamente para que sea la altura de los contenidos, en lugar de la altura de toda la pantalla.
Necesita agregar esto:
html { background: transparent }
O bien , configure el "fondo de la página" ( background: black ) en html , lo cual está bien hacer.
¿Por qué? Dentro de Bootstrap, hay esto:
html,body{background-color:#ffffff;}
(tenga en cuenta que el valor de background predeterminado es transparent )
Para obtener más información sobre por qué esto es importante, consulte: ¿Cuál es la diferencia entre aplicar reglas css a html en comparación con body?
Tenga en cuenta que esto ya no es un problema con Bootstrap 3+.
la mejor solución sería
.content{
background-color:red;
height: 100%;
min-height: 100vh;
}
toma automáticamente la altura de veiwport (vh) en bootstrap.
<style>
body { background: url(background.png); }
.container { background: ; }
</style>
esto funciona para una imagen de fondo si lo quieres