Mi pregunta es ¿cómo puedo configurar todo el ancho y altura de la imagen de fondo para el encabezado de Bootstrap como http://demo.evenfly.com/view?theme=SantaGo ( no estoy esperando animaciones, estoy esperando cómo hacer de fondo que cabe en pantalla como esta)?

Esto es lo que he hecho hasta ahora,

https://codepen.io/anon/pen/reYRBo

HTML:

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="sltac.css">
  </head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back> 
</div>
</header>
</body>
</html>

CSS:

body{
    margin:0;
    padding:0;
    width:100%;
}

#jumboid{
    width:100% ;

}

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;

}

header{
     width:100%;
  height:100%;
  height:calc(100% - 1px);
  background-image:url('a.jpg');
  background-size:cover;
}

Al final estoy esperando el resultado como este(si yo soy de la página de captura de pantalla),

resultado esperado

  • Algo como esto? bootply.com/108614
  • creo que el siguiente css es suficiente para sus necesidades.usted no tiene que escribir ningún otro css. body{ margin:0; padding:0; }
  • sí, he intentado eso antes, pero la imagen no responde :/
  • su conjunto de la cubierta, por lo que siempre escala 🙂
InformationsquelleAutor Kaw123 | 2016-04-06

5 Comentarios

  1. 5

    No hay necesidad de utilizar un extra de la etiqueta de imagen. Sólo tienes que configurar el fondo de la propiedad y el background-size: cover

    Probar como esta:

    CSS:

    html,
    body {
      width: 100%;
      height: 100%;
    }
    header {
      width: 100%;
      height: 100%;
      background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
      background-size: cover;
    }

    HTML:

    <body>
    
      <header>
    
      </header>
    </body>

    • Gracias por tu respuesta, esto es algo que yo quiero,no es exactamente esto . pero me quedo con esta (Y)
  2. 1

    ¿Tienes un img etiqueta en el interior de la #jumboid?

    En caso de que no, que fácilmente se puede arreglar con un background-image en #jumboid.

    Editar el css de la siguiente manera:

    #jumboid{
        width:100% ;
        height: 100vh;
        background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    (horquillado) ejemplo: https://codepen.io/pimskie/pen/wGPOar

  3. 1

    Simplemente usar, utilizando contain mantiene su bg-img escalable y sensible-

    background-size:contain;

    O si desea tener un encabezado fijo altura y wan no para mantener la imagen de fondo de escala hasta la cabecera de la ancho-

    background-size:100% 100%;

  4. 0

    Hola prueba este código y Es esto lo que usted está buscando.

    CSS:

    body {
      margin: 0;
      padding: 0;
      width: 100%;
    }
    #jumboid {
      width: 100%;
    }
    .bg-image {
      position: relative;
      background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
      height: 450px;
      background-attachment: fixed;
    }
    .bg-image img {
      display: block;
      width: 100%;
      margin: 0 auto;
    }
    header {
      width: 100%;
      height: 100%;
      height: calc(100% - 1px);
      background-image: url('a.jpg');
      background-size: cover;
    }

    HTML:

    <html lang="en">
    
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="sltac.css">
    </head>
    
    <body>
      <header>
        <div class="row">
          <div class="bg-image" id="jumboid">
          </div>
    
        </div>
      </header>
      <div class="restofthecontent">
        <p>your content</p>
      </div>
    
    
    
    
    
    </body>
    
    </html>

    • Gracias por la respuesta,pero la mitad de la imagen también se quitan en su implementación
  5. 0

    Poner su imagen en el fondo de un DIV por css no en <img> etiqueta.

    y dar ese DIV debajo de CSS.

    .Your_DV {
     background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
    background-position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here