Header avec image ajustable

Bonjour,

J'aime que la page s'ajuste à la résolution d"écran. Lorsque j'ai une image en header, j'utilise le code suivant :
html :

<div class="header">
 <img class="header" src="monimage.jpg" />
</div>

css:

.header {
 width: 100%;
}

Cela fonctionne parfaitement, mon image s'adapte bien à la résolution en gardant ses proportions (je ne veux évidemment pas de déformation !).

Or, j'aimerais passer l'image dans le code CSS, à la fois pour mieux respecter la séparation du contenu et de la présentation, et surtout pour pouvoir mettre une autre image lorsqu'on change le style (page à styles multiples).

Bon, autrement dit, je cherche les propriétés CSS qui font si cruellement défaut : background-width et background-height ! Mais j'aimerais bien trouver une astuce. Est-ce possible ?

Bonjour,

Impossible d'étendre ou de réduire une image de fond en CSS.

Reste la possibilité de concevoir des images de background assez larges (genre 1500px, mais ça devient lourd en Ko) et dont seule la partie correspondant à la largeur de la div sera visible : l'image ne sera vue intégralement que sur de grands écrans. Après, à toi de caler le truc avec des max-width corrects.
Je n'ai jamais essayé, mais centrer ou caler à droite l'image de fond devrait permettre de choisir quelle partie de l'image s'affichera prioritairement.

Florent V. a écrit :
Impossible d'étendre ou de réduire une image de fond en CSS.

Bon... Je m'en doutais un peu, mais j'espérais que quelqu'un aurait une formule magique !

Arsene a écrit :
Reste la possibilité de concevoir des images de background assez larges (genre 1500px, mais ça devient lourd en Ko) et dont seule la partie correspondant à la largeur de la div sera visible[...]

Oui, ou une image petite sur un fond étirable de couleur assortie... Faute de mieux, c'est quelque chose dans le genre que je vais choisir, mais ça reste un peu frustrant

En fouillant un peu, j'ai aussi trouvé cela. Ca peut aussi être un palliatif intéressant pour ceux qui, comme moi, regrettent que la norme n'ait pas prévu une possibilité qui semble pourtant si basique (z'ont que des écrans 800x600, au w3c ? )

jibe74 a écrit :
ceux qui, comme moi, regrettent que la norme n'ait pas prévu une possibilité qui semble pourtant si basique (z'ont que des écrans 800x600, au w3c ? )

Je ne sais pas quelle était la raison de ce manque dans la spécification, mais:
- CSS2 date de 1998;
- à l'époque, les navigateurs n'étaient pas très bons pour ajuster les images de manière fine (et pour certains, ou même la plupart, c'est encore le cas... pour Firefox il me semble que ça s'améliore dans la version 3 avec l'utilisation de la librairie graphique Cairo);
- des redimensionnements fins demandent de sous-échantillonage, et en 98 on craignant sans doute des problèmes de performances;
- il y avait plus urgent à faire pour cette spécification.

Pour information, c'est en chantier pour CSS3:
http://www.w3.org/TR/css3-background/#the-background-size