Stretch a background image for Internet Explorer
Bon ok, le titre en anglais, ca le fait pas, mais je savais pas comment traduire ;)
Cela dit, il est vrai que si on cherche à "strecher" une image de fond en HTML/CSS, càd. s'arranger pour que cette image de fond occupe la totalité de l'objet dont elle sert de fond (bon ok, c'est pas très clair...), on se rend vite compte que c'est un calvaire...
En HTML, on a le choix pour son image : Tiled, Centered, Left, Rigth, Bottom, Top mais pas Stretched...
Cela donne cours à des solutions plutot farfelue comme :
HTML :
<div id="background">
<img src="background.jpg" style="width: 100%; height: 100%;">
</div>
<div id="pageContent">
This should work
</div>
CSS :
body {margin: 0px;}
#background {width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;}
#pageContent {z-index: 1;position: absolute;}
Ce qui n'est pas vraiment top, vu que finalement on crée plusieurs div, on doit jouer sur des positionnages Z-Index.
Cela s'empire encore si l'élément auquel on veut appliquer le strech se trouver "en milieu de page", positionné dans le flux. Comment dans ses conditions utiliser un positionnement absolute pour le background de l'image ?
Bref, il s'agit là d'une grande lacune du HTML. Heureusement, sous IE5+, il existe un filter qui permet de palier à ce problème :
HTML :
<div style="/*-- Size Fix --*/ width:100%; height: auto;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(
src='/img/bg.png',
sizingMethod='scale'
);"
>
<!-- Ici le contenu de votre DIV. C'est ce contenu qui imposera sa taille au DIV -->
</div>
Hélas, comme toute solution non cross-browser, cette méthode devra se cantonner à la démonstration...
Démonstration que voici et que je vous conseille de tester :
Transparent Gradient :
Result :
HTML :
<html>
<head>
<title>Titre</title>
</head>
<body>
<DIV style="background: #00aa00;"><DIV
STYLE="
position:
relative;
border:
outset green;
height:
auto;
width:
100%;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.nudel.dopus.com/images/Transparent_Gradient.png',
sizingMethod='scale'
)
filter:
alpha(opacity: 50);
padding:
10px;
"
>
Du contenu...<br/>
...la suite du contenu...<br/>
...la fin du contenu !
</DIV></DIV>
</body>
</html>
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.
