Foros del Web » Creando para Internet » CSS »

como ajustar background a la resolucion del navegador ?

Estas en el tema de como ajustar background a la resolucion del navegador ? en el foro de CSS en Foros del Web. cual es el codigo css para ajustar el background-image a cualquier resolucion que tenga el navegador ?...
  #1 (permalink)  
Antiguo 26/04/2011, 23:50
 
Fecha de Ingreso: noviembre-2007
Mensajes: 19
Antigüedad: 10 años
Puntos: 1
Pregunta como ajustar background a la resolucion del navegador ?

cual es el codigo css para ajustar el background-image a cualquier resolucion que tenga el navegador ?
  #2 (permalink)  
Antiguo 27/04/2011, 04:58
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: como ajustar background a la resolucion del navegador ?

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
  1.   <div id="fondo-imag">
  2.     <img src="paisajes.jpg" alt="una imagen" />
  3.   </div>
  4.  
  5.   <div id="contenedor">
  6.    
  7. <p>Redimencion de la imagen sin deformarse</p>
  8.  
  9.   </div>
  10. </body>

Las css
Código CSS:
Ver original
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     position: relative;
  6.   }
  7. html, body {
  8.         width: 100&#37;;
  9.         min-height: 100%;
  10.         height: auto !important;
  11.         height: 100%;
  12. }
  13. #fondo-imag {
  14.         position:fixed;
  15.         top:-50%;
  16.         left:-50%;
  17.         width:200%;
  18.         height:200%;
  19. }
  20. #fondo-imag img {
  21.         position:absolute;
  22.         top:0;
  23.         left:0;
  24.         right:0;
  25.         bottom:0;
  26.         margin:auto;
  27.         min-width:50%;
  28.         min-height:50%;
  29. }
  30. #contenedor {
  31.         width: 700px;
  32.         margin:0 auto;
  33.          overflow:auto;
  34. }
  35. #contenedor p {
  36.         font-size:18px;;
  37.         color: #fff;
  38.         font-family: Tahoma, Geneva, sans-serif;
  39.          text-align:center;
  40.          float:left;  
  41.           background: rgba(0,0,0,.4);
  42.           width:100%;
  43.           margin-top:200px;
  44. }
  45. .regresar {background: #fff; position: fixed; top: 0; left:0;}

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:54.