[Résolu] Le CSS choisit l'image background selon la résolution

Bonsoir à tous !

Je cherche un script HTML/CSS (pas de Javascript) pour choisir une image de fond selon la résolution d'écran du visiteur.

(Cette image doit faire la largeur complète sans être étirée.)

Une pitite idée ? Merci !
Modifié par jecario (30 Jul 2008 - 22:15)

Hello jecario,

ce n'est pas possible en html/css car la résolution d'écran d'un visiteur ne peut être déterminée qu'à l'aide d'un langage client (comme Javascript) !

Par contre, en fonction de ce que tu veux comme rendu, tu peux peut-être choisir ton image la plus grande et la centrer dans ton conteneur :

background: transparent url(magrandeimage.jpg) fixed no-repeat 50% 50%;

A+

Les réponses sont rapides ici, c'est sympa

Okay pour le JS alors s'il n'y a pas le choix. Je ne pourrai pas centrer l'image, c'est un dégradé que je répète sur toute la hauteur. Merci !!

Heyoan a écrit :
ce n'est pas possible en html/css car la résolution d'écran d'un visiteur ne peut être déterminée qu'à l'aide d'un langage client (comme Javascript) !

À dire vrai, c'est possible en CSS 3 via les Media Queries.
Mais on parle ici du futur (Firefox 3.1, IE... 9?, Opera 10?), sauf pour Safari 3.

Bonjour,

Si c'est uniquement un dégradé qui se répète sur la partie haut de la page alors la solution est facile.
Il faut juste créer une image de ce dégradé de 1px de largeur et avec la hauteur que tu veux et tu mets ceci sur le Body avec seulement une répétition de x

body {
	background-image: url(degrade.png);
	background-repeat: repeat-x;
}

wael a écrit :
Il faut juste créer une image de ce dégradé de 1px de largeur

Mieux vaut mettre plusieurs pixels pour diminuer le nombre de répétitions nécessaires, et éviter ainsi des problèmes de performance sur certaines configurations un peu poussives. Pour ma part j'utilise des images de 60px de large (ou de haut) pour les dégradés répétés en largeur (ou hauteur). Avec le bon format d'image, ça ne pose pas de problème de poids.