html - Bootstrap de ancho completo con 2 fondos diferentes(y 2 columnas)
css twitter-bootstrap (2)
Es un poco difícil de explicar, es por eso que tampoco puedo encontrar la respuesta en Google.
Estoy trabajando con Bootstrap 3, y necesito una imagen de fondo de ancho completo. Además de esos 2 fondos de color transparente. Hice una imagen de ejemplo para aclararlo todo:
1 + 2: fondo de color transparente combinado
3 + 4: fondo de color transparente combinado
1 + 2 + 3 + 4: imagen de fondo combinada (capa más baja)
¿Alguien sabe si esto es posible y cómo? ¡Gracias por tu ayuda!
Creo que lo descubrí ... Gracias a Paulie_D
Ejemplo muy simple:
HTML:
<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
<div class="row">
<div class="col-sm-4 red20">xx</div>
<div class="col-sm-8 red50">xx</div>
</div>
</div>
<div class="cell red50">xxx</div>
</div>
CSS:
.fullwidth {
background: url(''http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg'');
display:table;
width:100%;
}
.cell{
display:table-cell;
vertical-align:top;
}
.red20{
background-color:rgba(255,0,0,0.2);
}
.red50{
background-color:rgba(255,0,0,0.5);
}
Enlace a jsfiddle: https://jsfiddle.net/DTcHh/14045/
Sí, usando las técnicas descritas en esta question pero extendiéndola a las columnas.
La demostración de Codepen (a continuación) muestra el resultado mejor que el fragmento de pila que se incluye como referencia.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
/* prevent scrollbar */
}
.container {
width:80%;
margin:auto;
margin-top: 1em;
position: relative;
overflow: visible;
}
.extra:before {
content: '''';
display: block;
/* override bootstrap */
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
transform: translate(-50%, 0);
}
[class*="col"] {
border: 2px solid grey;
min-height: 320px;
position: relative;
}
.left:before {
content: '''';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.5)
}
.right:before {
content: '''';
position: absolute;
height: 100%;
width: 100vw;
top: 0;
left: 0;
background: rgba(0, 0, 255, 0.25);
}
<div class="container extra">
<div class="row">
<div class="col-sm-4 left"></div>
<div class="col-sm-8 right"></div>
</div>
</div>