Page 1 sur 1

Image en background qui s'étire selon la résolution mais pas

Posté : 20 mars 2008, 14:18
par catseyes
Bonjour,

Le sujet est assez parlant mais je voulais savoir comment faire, j'ai bien cherché sur le net mais j'ai rien trouvé de concret. Je pensais à la surperposition de calques via les z-index, c'est ca la (seule) soluce ? Comment faire également car je maitrise mal ?

Bisous

catseyes

Posté : 20 mars 2008, 15:51
par AB
A priori j'opterais plutôt vers une détection de la résolution en javascript et suivant la valeur trouvée faire afficher (toujours en javascript) une image de dimension différente au background

Code : Tout sélectionner

<script type="text/javascript"> function img_fond(id) { var widthresol= screen.width; var heighthresol= screen.height; var img_back; //dans l'exemple je ne me sert que de la largeur et de deux photos (deux possibilités) mais tu pourrais faire des tests également pour la hauteur, faire plus de conditionss et utiliser plus de photos if(widthresol <= 1024) img_back = 'PHOTO/photo1.jpg'; else img_back = 'PHOTO/photo2.jpg'; var id_back = document.getElementById(id); id_back.style.backgroundPosition = 'center'; id_back.style.backgroundRepeat = 'no-repeat'; id_back.style.backgroundImage = "url(" + img_back + ")"; } </script> </head> <body id = "bod" onload = "img_fond('bod')"> bla bla </body> </html>