Foros del Web » Creando para Internet » CSS »

Image width 100% en un div

Estas en el tema de Image width 100% en un div en el foro de CSS en Foros del Web. hola. Bueno se que esta info esta por muchas partes pero no se adapta y no lo e logrado adaptar tampoco a lo que yo ...
  #1 (permalink)  
Antiguo 02/03/2014, 11:25
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 13 años, 6 meses
Puntos: 11
Pregunta Image width 100% en un div

hola.
Bueno se que esta info esta por muchas partes pero no se adapta y no lo e logrado adaptar tampoco a lo que yo necesito.
El caso es el siguiente tengo tres div un header un contenido y un footer cada uno con su respectivo tamaño lo que quiero lograr es que solo el div header tenga una img de fondo que tenga un width 100% pero que conserva su height y tambien que conserva la imagen. les pongo un ejemplo del codigo.

Código HTML:
Ver original
  1. <div id="header">
  2. </div>
  3.  
  4. <div id="cont">
  5. </div>
  6.  
  7. <div id="footer">
  8. </div>

Código CSS:
Ver original
  1. #header
  2. {
  3. background:url('imagen.jpg');
  4. background-size:100%;
  5. width:100%;
  6. height:400px;
  7. }
  8. #cont
  9. {
  10. width:100%;
  11. height:700px;
  12.  
  13. }
  14. #footer
  15. {
  16.  width:100%;
  17. height:100px;
  18. }

el caso es que quiero que solo en el div header este la imagen y que se mantenga en diferentes resoluciones cuando le hago zoom o quito zoom la imagen siga de la misma forma viéndose completa de ancho y respetando el alto.

Asi como lo hace la pagina de skype.com en el inicio con su header quiero que con la imagen pase lo mismo.

Muchas Gracias de ante mano
  #2 (permalink)  
Antiguo 02/03/2014, 14:01
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Image width 100% en un div

Tal vez te valga:

Código CSS:
Ver original
  1. background-size: cover;

O no sé si te da igual que se deforme o no la imagen de fondo (que no imagen a secas), supongo que no te da igual.

Etiquetas: 100%, image
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:23.