XHTMLforum - Hintergrundgrafik per Auflösungsabhänigkeit dynamisch ändern?

XHTMLforum (http://xhtmlforum.de/index.php)

- Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)

- - Hintergrundgrafik per Auflösungsabhänigkeit dynamisch ändern? (http://xhtmlforum.de/showthread.php?t=62930)

Hintergrundgrafik per Auflösungsabhänigkeit dynamisch ändern?

Hallo!

Ich versuche folgendes umzusetzen:

Ein Besucher mit einer Auflösung von 1024x768 bekommt beim Besuch der Seite eine Hintergrundgrafik mit dieser Auflösung (1024x768).
Ein weiterer Besucher mit einer höheren Auflösung als 1024x768 aber kleiner als 1680x1050 bekommen das nächst höhere, 2. Bild und alle mit einer Auflösung von mehr als 1680x1050 bekommen dann das 3. und letzte Bild.

Folgendes habe ich in die index.html gepackt.

Code:

<script language="javascript">

var scr_width = screen.width;

var scr_height = screen.height;

if (scr_width <= 768)

        document.write(scr_width + " x " + scr_height); 



if (scr_width > 768 && screen.width < 1024)

        document.write(scr_width + " x " + scr_height);



if (scr_width == 1024)

        document.write(scr_width + " 0 " + scr_height);

        

if (scr_width == 1024)        

        document.write('<link rel="stylesheet" href="css/style.css" type=0"text/css">');

                

document.write(scr_width + " x " + scr_height); 

</script>



<script language="javascript">

var scr_width = screen.width;

var scr_height = screen.height;

if (scr_width <= 600)

        document.write(scr_width + " x " + scr_height); 



if (scr_width > 600 && screen.width < 1280)

        document.write(scr_width + " x " + scr_height);



if (scr_width == 1280)

        document.write(scr_width + " 0 " + scr_height);

        

if (scr_width == 1280)        

        document.write('<link rel="stylesheet" href="css/style1.css" type=0"text/css">');

                

document.write(scr_width + " x " + scr_height); 

</script>



<script language="javascript">

var scr_width = screen.width;

var scr_height = screen.height;

if (scr_width <= 960)

        document.write(scr_width + " x " + scr_height); 



if (scr_width > 960 && screen.width < 1280)

        document.write(scr_width + " x " + scr_height);



if (scr_width == 1280)

        document.write(scr_width + " 0 " + scr_height);

        

if (scr_width == 1280)        

        document.write('<link rel="stylesheet" href="css/style2.css" type=0"text/css">');

                

document.write(scr_width + " x " + scr_height); 

</script>

In den jeweiligen css Dateien wurden dann die vorbereiteten Hintergrundgrafiken angegeben.

Also ich es dann getestet habe, greift nur das erste Bild. Stelle ich die Auflösung höher, bleibt trotzdem das erste Bild.
Weiss jemand wie ich den Ablauf korrekt gestalte?

Gr

Warum? Die größe des Monitors ist doch unabhängig davon, wie groß das Browserfenster ist. Je größer die Auflösung umso wahrscheinlicher, ist es dass das Fenster eher kleiner ist, da Leute mit grossen Monitoren (resp. Auflösung) gerne mehrere Anwendungen nebeneinander offen haben.

Die css Anweisung für den Body lautet wie folgt.

background-color: white;
background-image: url(../images/1280x600.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;

Wenn ich das Bild für eine Auflösung über 2000px optimiere, sehen User mit einer Auflösung von 1024x768 nur den Himmel anstatt noch ein bischen Landschaft. (Bild mit Himmel und Landschaft).
Sobald ich das Bild kleiner mache, sehen die Leute mit größer Auflösung zwar auch das Bild, der Rest bleibt aber weiss bzw. die Farbe die vergeben wurde.
Gr

Hallo

Du willst ein 100% Hintergrundbild bei allen Monitor Auflösungen?
Dazu braucht man kein js. Schau mal hier:
Scaling Fake BG Image

Gruß Manfred

Hallo!

Ja da bin ich auch schon drüber gestolpert. Gefällt mir aber nicht wirklich. Schon alleine das mit der Skalierung. :oops:

Edit:

Ich habe es nun mit einer window.outerHeight Abfrage hinbekomen.

Gr