[Résolu] Background et header vide

Bonsoir,
J'ai un petit soucis avec ma mise en page css.
En effet j'aimerais définir un header vide de width 100% avec une image en background.

J'espérais que la hauteur de mon header serait proportionnelle à la largeur de l'image mais sa hauteur reste à 0 et donc rien ne s'affiche.

Il y a-t-il un moyen de remédier à cela sachant que lorsque je mets cette image directement dans le html avec comme largeur 100% la taille de mon header s'adapte automatiquement aux proportions de l'image.
(Bien entendu avoir l'image dans le html ne m'arrange pas)

Merci d'avance.

LaSalade a écrit :
J'espérais que la hauteur de mon header serait proportionnelle à la largeur de l'image mais sa hauteur reste à 0 et donc rien ne s'affiche.

Et oui c'est normal car une image injectée via la propriété background-image ne la transforme pas pour autant en élément.

Si vous voulez tout de même adopter cette technique (forte utile dans certains cas) il va falloir faire corespondre la div à l'image et opérer un ratio.

Par exemple :

.ratio-1-3 {
    padding-bottom: 33.33%;
}

Exemple en ligne : Ratios css
Exemple avec des images : Layout for Photoblog

Merci pour ta réponse en effet ça fonctionne correctement

Tout le secret est dans le padding