Imagen de fondo receptiva de Bootstrap de Twitter dentro de Div

como puedo modificar #bg image para que sea receptiva, redimensionable y proporcional en todos los navegadores?

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

Encontré una solución.

background-size:100% auto;

También puedes probar:

background-size: cover;

Hay algunos buenos artículos para leer sobre el uso de esta propiedad CSS3: PPerfecta imagen de fondo de página completa por CSS-Tricks y Tamaño de fondo CSS por David Walsh.

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

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

Tuve un 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 me funcionaba de otra manera. Me permitió establecer la altura del contenedor, según la relación de tamaño de la imagen de mi banner. y también responde en mi caso.

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

background-size: contain;

Especifica que se debe cambiar el tamaño de la imagen para que quepa dentro del elemento sin perder su relación de aspecto.

La forma de hacerlo es utilizando el tamaño de fondo, por lo que en su caso:

background-size: 50% 50%;

o

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

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;