css - imagen - jumbotron ejemplos

Imagen de fondo de Bootstrap Jumbotron receptiva

Question

Estoy usando el jumbotron bootstrap, e incluido una imagen de fondo. Cambiar el tamaño de la pantalla hace que la imagen se repita y se repita, mientras que quiero que la imagen se ajuste de forma responsiva.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

¿Cómo harías para que la imagen sea receptiva? El sitio está AQUÍ . Gracias por tus ideas!

Answer 1

La forma más simple es establecer el tamaño de fondo para "cubrir"

.jumbotron {
background-image: url("../img/jumbotron_bg.jpg");
background-size: cover;}

Steve

Answer 2

Esto es lo que hice.
En primer lugar, simplemente anule la clase jumbotron y haga lo siguiente:

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

Entonces, ahora tienes un jumbotron con fondo receptivo en su lugar. Sin embargo, como Irvin Zhan ya respondió, la altura del fondo todavía no se muestra correctamente.

Una cosa que puedes hacer es llenar tu div con algunos espacios como este:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

O, más elegantemente, puede establecer la altura del contenedor. Es posible que desee agregar otra clase para que no anule la clase de contenedor Bootstrap.

<div class="jumbotron">
    <div class="container push-spaces">
        About
    </div>
</div>

.push-spaces
{
    height: 100px;
}

Answer 3

Descubrí que esto funcionó perfectamente para mí:

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

Puede cambiar el tamaño de su pantalla y siempre ocupará el 100% de la ventana.

Answer 4

TLDR: use background-size: 100% 100%; .

background-size: cover; puede cortar algunas partes de la imagen produciendo malos resultados.

Usando background-size: 100% 100%; fuerza a la imagen a tomar el 100% del elemento padre tanto en height como en width .

Vea W3Schools para más información sobre esto.

Aquí hay una imagen de fondo de jumbotron receptiva y que funciona:

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

Answer 5

Así es como lo hago:

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  <h1>Hello</h1>
</div>

Answer 6

Desafortunadamente, no hay forma de hacer que la altura de div responda al tamaño de fondo . La solución más fácil que he usado es agregar una etiqueta img dentro de su jumbotron que contiene esa imagen de fondo.