problema alto div.header con background imagen

[juansemaster]

Tengo un DIV header que uso de portada para mi sitio web, en el tengo una imagen de fondo. Estoy intentando adaptar mi sitio para diferentes pantallas.

Cuando todo era fijo no tenia problemas con el alto, indicaba el height en pixeles y me mostraba la imagen de fondo completa dentro del div.

Ahora cuando se reduce la pantalla la imagen se reduce escaladamente, pero no logro que el alto del Div le siga el paso. basicamente a poner height auto o 100% ni siquiera muestra toda la imagen del fondo.

Código CSS:

#header{background: url(imagen) no-repeat; display: block; background-position: center center; background-size: 100% auto; height: 100%; max-width: 100%; max-height:100%}
 

dentro del div header no hay nada.

[ArturoGallegos]

Que tipo de imagen es? se puede deformar o no?

Si se puede deformar usa la propiedad background-size: 100% 100%;

Caso contrario puedes usar media queries para ajustar el tamaño en los tamaños de pantalla mas comunes.... o bien optar por javascript/jquery para redimencionar por regla de 3

[juansemaster]

No tengo problemas con la imagen, por suerte se escala, el problema es con el alto del div.

[ArturoGallegos]

De verdad que no entendiste o no leíste lo que te comente... repasalo unas cuantas veces y veras que es la solución a tu problema.

Caso contrario puedes usar media queries para ajustar el tamaño en los tamaños de pantalla mas comunes.... o bien optar por javascript/jquery para redimencionar por regla de 3

hay te lo dejo de tarea

[JuJoGuAl]

Iniciado por juansemaster

No tengo problemas con la imagen, por suerte se escala, el problema es con el alto del div.

Has dicho que el DIV no tiene nada y tiene una imagen de fondo, entonces Lógicamente, si no hay nada en una caja su "alto" sera corto o nada puesto que no tiene que adaptarse a nada, el fondo no obliga a ningún bloque a tomar un alto.

Si lo que quieres es que el DIV tenga el tamaño del fondo o ese tamaño como Minímo pues agrega el Min-height: el tamaño de la IMG en pixeles.

Si el Header tendrá información que le obligue a tomar un tamaño es bueno especificar.

Técnicamente que es lo que quieres hacer? quiere que el Header tome un Tamaño pero cual? o con referencia a que?

[juansemaster]

Gracias a los dos logre resolver "aceptablemente" el problema.

Código CSS:

#header{background: url(imagen) no-repeat; display: block; background-position: center center; background-size: 100% 100%; max-width: 100%; min-height:240px; background-color: #004040;}
@media screen and (max-width: 800px){
#header{min-height:150px;}
}
@media screen and (max-width: 360px){
#header{min-height:100px;}
}