Adapter un background à la résolution

oni13 · 04/05/2011, 16h01

Bonjour,

Je dois insérer un background sur un site, mais il ne s'agit pas d'une simple couleur, je dois donc changer sa taille en fonction de la résolution de l'écran.

J'ai trouvé ceci: (que j'ai intégré à ma balise body)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script language="JavaScript" type="text/javascript">
if (screen.width==800||screen.height==600)
document.write('background="lien vers image 800x600">');
else if (screen.width==1024||screen.height==768)
document.write('<background="lien vers image 1024x768">');
else if (screen.width==1280||screen.height==1024)
document.write('<background="lien vers image 1280x1024">');
else if (screen.width==1600||screen.height==1200)
document.write('<background="lien vers image 1600x1200">');
</script>

Mais il y a un tas de résolutions (par exemple je suis sur portable, ==> 16/9) et je ne trouve pas ça tres pratique de chercher toute les résolutions possibles.
L'image en question n'est pas non plus tres precise, je veux dire qu'on peut la redimensionner sans qu'elle ne s’endommage.
Alors je pensais à quelque chose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body background = "monImage.jpg" width = screen.width , height = screen.height >

(en utilisant du JS bien sur)
je suis conscient que ce code n'a aucune chance de marcher, mais je n'ai pas trouvé la manière d'obtenir ca.

Je vous remercie

PS: j'ai trouvé des topics disant d'utiliser du CSS, sans pour autant trouver la solution, et je n'ai jamais fait de CSS, si on peut éviter, je préfère. Sinon tant pis

guy777 · 05/05/2011, 10h20

tu peux très bien avec screen récupérer les dimensions de l'écran, ou alors tu peux aussi avoir la résolution de l'espace d'affichage d'un navigateur...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Récupération des infos de dimensions de l'espace d'affichage</title>
    </head>
    <body>
        <script type="text/javascript">
            function getScreenSize() {
                return {
                    x: screen.width,
                    y: screen.height
                };
            }
 
            function getLayoutSize() {
                var html = document.documentElement;
                if(navigator.appName.match('Internet Explorer'))
                    return {
                        x: html.offsetWidth,
                        y: html.offsetHeight
                    };
                else if (navigator.appName.match('Netscape'))
                    return {
                        x: html.clientWidth,
                        y: html.clientHeight
                    };
            }
 
            var size = getScreenSize();
            alert("x="+size.x+", y="+size.y);
 
            size = getLayoutSize();
            alert("x="+size.x+", y="+size.y);
        </script>
    </body>
</html>

EDIT : En ce qui concerne le CSS attention, si tu met une image en background tu ne peux pas la redimensionner (en CSS2 non, en CSS3 oui)...

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email