css3 - jumbotron - Imagen de fondo responsiva de Bootstrap

header background image bootstrap

Question

¿Cómo hago, usando bootstrap, un soporte de div que tenga como fondo una imagen que se ajuste a la visualización de los visitantes? La imagen tiene una altura y anchura fijas. Si la pantalla es más pequeña, se debe cambiar el tamaño para que no tenga x, y desbordamiento.

Answer 1

Esto funcionó para mí:

body{
background-image: url(''../url'') ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height:100%;
}

Answer 2

No tengo mucha experiencia en Bootstrap, pero creo que no existe tal característica. Te recomiendo que crees tu propio "Tema Bootstrap", un archivo CSS o LESS puro para personalizar tu fondo.

Usted podría simplemente usar:

body
{
background: url(https://www.google.hu/images/srpr/logo4w.png);
background-size: cover;
}

Este código extiende su imagen de fondo en ambas dimensiones, pero corta algunas partes de la imagen, a menos que la proporción de la pantalla sea la misma que la proporción de la imagen.

body
{
background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed;
background-size: cover;
}

Answer 3

Primero, para la imagen de fondo:

div.someclass{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Esto hará que su imagen de fondo sea receptiva, es decir, se ajustará al tamaño de la pantalla en la que se ve la página.

En segundo lugar, para mantener el contenido del formulario principal un margen apropiado desde arriba en cualquier dispositivo es darle a la división que acaba de crear para el contenido principal un margen relativo en la parte superior:

div.someclass{
margin-top:5%;
}

Cambie el 5% anterior de acuerdo a sus requerimientos.

Answer 4

Podrías usar background-size como este:

div.someclass {
background-size: cover;
}

Hay un buen artículo de @Chris Coyier que muestra algunas técnicas: http://css-tricks.com/perfect-full-page-background-image/