Etirer en fonction de la résolution

balise, script, ou autre???

16 août 2006 à 17:45:23

Bonjour à tous

J'aimerais savoir s'il existe une balise ou un script permettant d'étirer l'image de fond en fonction de la résolution (comme sous windows ^^, où l'on peut centrer, étirer, mettre en mosaïque).

Only limits are ours...

Seshi

16 août 2006 à 17:49:27

euh.. je pense que faire un design extensible serait le mieux pour ce que tu voudrais faire... sans conviction:
Faire un design Extensible

Asphator

17 août 2006 à 18:01:39

Merci beaucoup pour le lien (j'avais complètement zappé la section des tutos par les zéros).

Cependant, cela ne répond pas à ma question car aucune information la concernant ne se trouve dans ce très bon tuto.

Only limits are ours...

Anonyme

17 août 2006 à 18:08:12

Avec un javascript tu peu déterminer la taille de l'écran (enfin il me semble), le principe :

- Tu détermine la taille de l'écran

- Ensuite si la taille de l'écran est de 800x600

- Tu modifie les propriétés de l'image à étirer : tu fait passer width à 800 par exemple et height à 600 par exemple.

Asphator

17 août 2006 à 18:30:22

le width et heigth de l'image de fond? o_O

Je crois que je vais d'abord aller apprendre le javascript alors ... en espérant que cela résolve mon problème...

Only limits are ours...

Anonyme

17 août 2006 à 18:32:12

Euh non, le width et le height d'une image positionner dans une div.

Asphator

17 août 2006 à 18:47:31

Bien dans ce cas je me suis mal exprimé.

L'image de fond est dans mon CSS puisqu'elle s'applique au body tout entier. C'est cette image de fond que j'aimerais étirer en fonction de la résolution du visiteur.

Only limits are ours...

Anonyme

17 août 2006 à 18:53:17

je croit que ce n'est pas possible

par contre, comme je t'ai dit ton imge de fond tu la met dans une div
et tu met ton docmument dan une autre div

Ces deux div seront positionner de la même façon mais elle auront pas le même z-index et une aura l'overflow à hidden (enfin je coit)

Sitevolution

17 août 2006 à 18:56:54

alors tu détermines la largeur et la hauteur de l'écran du visiteur avec screen.width (pour la largeur) et screen.height (pour la hauteur), grâce au javascript et en fonction de la résolution du visiteur, tu changes l'image du fond, tu devras donc faire une image pour chaque résolution.
ça devrait très approximativement donner ceci :

if( screen.width == 800 && screen.height == 600)
{
document.style.background = "url('http://tonsite.fr/fond800x600.jpg')";
}

if( screen.width == 1024 && screen.height == 800)
{
document.style.background = "url('http://tonsite.fr/fond1024x800.jpg')";
}

if( screen.width == 1200 && screen.height == 1024)
{
document.style.background = "url('http://tonsite.fr/fond1200x1024.jpg')";
}

if( screen.width == 1400 && screen.height == 1200)
{
document.style.background = "url('http://tonsite.fr/fond1400x1200.jpg')";
}

en fait c'est pas si approximatif que ça !

tu mets ce code entre des balises

ensuite tu mets le tout entre les balises <head></head> de chaque page !

Asphator

17 août 2006 à 18:58:21

en gros, le problème sera le même à l'intérieur du div si le div est trop grand (pour une résolution supérieur à 1024) ou sera coupé si le div est trop petit (pour des résolution plus petites que celle sur laquelle je travaille), puisque si j'ai bien compris ta démarche, ce sont les dimensions du div que tu modifies et non celles de l'image

Ou alors, j'ai pas compris ta démarche.

Edit : euh, y a un bug ? !! mon message apparait avant le tient, et le tient a été créé (selon la date de poste) avant

En tout cas, c'est bien ce que je craignais, devoir faire une image pour chaque résolution. Merci pour ton aide en tout cas

Only limits are ours...