Ajuste de la anchura completa de la imagen de fondo de la cabecera en Bootstrap

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

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)

InformationsquelleAutor Marco Klein

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

InformationsquelleAutor Pimmol
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%;

InformationsquelleAutor Himanshu Aggarwal

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

InformationsquelleAutor K.Shrestha

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;
}

InformationsquelleAutor Yashpal Sindhav

5 Comentarios

Dejar respuesta Cancelar respuesta