Twitter Bootstrap Responsive Background-Imagen interior Div

¿Cómo puedo modificar #bg la imagen para que sea sensible, redimensionable y proporcional en todo el navegador?

HTML: 

 <div class="container">
       <div class="row">
          <div class="col-md-2"></div>

            <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">

               </div>

            <div class="col-md-2"></div>
       </div>
  </div>

Css: 

@import url('bootstrap.min.css');

body{
    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;
    margin-top: 12%;    
}

#bg{
    background:url('../img/con_bg4.png') no-repeat center center;
    height: 500px;
}
Author: devo, 2013-09-27
Source

9 answers

Encontré una solución.

background-size:100% auto;
 76
Author: vkatsitadze,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-27 16:40:50

También puedes probar: 

background-size: cover;

Hay algunos buenos artículos para leer sobre el uso de esta propiedad CSS3: Perfect Full Page Background Image por CSS-Tricks y CSS Background-Size por David Walsh.

TENGA EN CUENTA QUE esto no funcionará con IE8 -. Sin embargo, funcionará en la mayoría de las versiones de Chrome, Firefox y Safari.

 22
Author: doodelicious,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-31 17:44:01

Pruebe esto (aplicar a una clase en la que se encuentra la imagen (no img en sí), por ejemplo, 

.myimage {
  background: transparent url("yourimage.png") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 500px;
}
 7
Author: Jowita Emberton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-18 15:43:20

Creo que esto también debería hacer el trabajo también:

background-size: contain;

Especifica que la imagen debe redimensionarse para que quepa dentro del elemento sin perder su relación de aspecto.

 6
Author: KevinAdu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-20 08:02:17

Tuve el problema similar y lo resolví usando: 

background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;

... aquí tuve que agregar el relleno : 50% porque no estaba funcionando para mí de otra manera. Me permitió establecer la altura del contenedor, según la relación de tamaño de mi imagen de banner. y también es sensible en mi caso.

 5
Author: Mashhood,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-15 10:32:01

La forma de hacerlo es usando background-size así que en tu caso: 

background-size: 50% 50%;

O

También puede establecer el ancho y la altura de los elementos en porcentajes

 1
Author: Hive7,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-27 16:41:09

Esto debería funcionar

background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 1
Author: Jay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-15 10:10:59

No utilice fijo: 

.myimage {
   background:url(admin-user-bg.png) no-repeat top center;
   background: transparent url("yourimage.png") no-repeat top center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: 100%;
   height: 500px;
}
 1
Author: RayKech,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-07 11:11:57

La clase Mby bootstrap img-responsive es la que buscas.

 1
Author: Dzintars,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-18 20:13:43