Image s'adaptant à la résolution de l'ecran utilisateur

Bonjour à tous,
J'aimerais savoir s'il est possible (ou plutôt comment faire),
pour avoir une image "de fond" ou une image inserer dans une DIV qui s'adaptera à la res ecran de l'utilisateur.

Je m'explique : imaginons je fais un site avec des images pleine rés. Disons qu'un utilisateur lambda à une résolution de 1440x768 (taille de mon mac portable si ma memoire est bonne)

Se charge aors une image qui correspond à sa resolution.

Si un 2eme utilisateur avec une res plus petite, comment faire pour que se charge alors une image adaptée à sa résolution.

Je crois que c'est possible en JS, sauf que je n'y connais rien héhé

exemple : http://grandpeople.no/work/#waves/

Merci d'avance

Il y a une solution en CSS, regarde dans les tutos et astuces du site...

la seule solution que j'ai trouver dans mes recherches est de faire une image "étirable"
donc perte de qualité.

j'ai besoin que mon image reste de très bonne qualité (book photo) donc que ce soit plusieurs images au même, et la bonne (celle adaptée à la res.) se charge.

A moins que je soit (aussi) une bille en recherche

Salut,

Voici le javascript qui te permet de stocker la largeur et la hauteur du navigateur du client dans des variables.
<script>

var ResolutionWidth = document.documentElement.clientWidth ;
var ResolutionHeight = document.documentElement.clientHeight ;

</script>

Ensuite si tu veux atteindre le background-image du body en fonction de la résolution détectée fait par exemple:

if(ResolutionWidth < 1024 ){
document.body.style.background = "url(images/1024x768.jpg)";
}
if(ResolutionWidth < 1240 ){
document.body.style.background = "url(images/1240x768.jpg)";
}

Si ça peut t'aider. Bonne chance, sans javascript c'est impossible je pense.
Modifié par Nomad (10 Aug 2011 - 18:36)

Sinon, suivant tes contraintes, tu peux te pencher la-dessus :
La méthode de Nicolas Gallagher

Salut,

Regarde du coté des MediaQueries.
Cela te permet d'ajouter des règles CSS en fonction de la résolution de l'utilisateur.
Tu peux ainsi choisir le fond d'écran à utiliser.

@media screen and (max-width: 1024px) {
....
}
@media screen and (max-width: 800px) {
....
}

A+ / F.