como ajustar background a la resolucion del navegador ?

EternalSoul · #1 (**permalink**) 26/04/2011, 22:50

cual es el codigo css para ajustar el background-image a cualquier resolucion que tenga el navegador ?

saul123 · #2 (**permalink**) 27/04/2011, 03:58

Hola

Te dejo aqui una manera de poner una imagen en todo tu body y redimensionarla sin que se deforme .

Ver el ejemplo funcionando ver ejemplo

Código HTML:

Ver original<body>
  <div id="fondo-imag">
    <img src="paisajes.jpg" alt="una imagen" />
  </div>
  
  <div id="contenedor">
    
<p>Redimencion de la imagen sin deformarse</p>
 
  </div>
</body>

Las css

Código CSS:

Ver original* {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
  }
html, body {
        width: 100&#37;;
        min-height: 100%;
        height: auto !important;
        height: 100%;
}
#fondo-imag {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#fondo-imag img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}
#contenedor {
        width: 700px;
        margin:0 auto;
         overflow:auto;
}
#contenedor p {
        font-size:18px;;
        color: #fff;
        font-family: Tahoma, Geneva, sans-serif;
         text-align:center;
         float:left;  
          background: rgba(0,0,0,.4);
          width:100%;
          margin-top:200px;
}
.regresar {background: #fff; position: fixed; top: 0; left:0;}