|
|||
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 (1024x76. 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> 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 |
Sponsored Links |
Sponsored Links |
|
|||
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. Edit: Ich habe es nun mit einer window.outerHeight Abfrage hinbekomen. Gr Geändert von hajo808 (12.11.2010 um 12:01 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Probleme mit HTML-Mail (CSS-definierte Hintergrundgrafik fehlt) | suppenelse | CSS | 3 | 17.09.2010 16:17 |
Hintergrundgrafik und flexible Spaltenbreite | Teaser | CSS | 1 | 27.11.2009 15:52 |
Per Ajax ein JS Array aus Datenbank befüllen zur weiterverwendung per JS | stravid | Javascript & Ajax | 30 | 24.11.2008 13:52 |
mod_rewrite Performance bei vielen Regeln | fox | Serveradministration und serverseitige Scripte | 7 | 25.09.2008 02:02 |
Ist absoluter container mit Höhe der ganzen Seite möglich? | amroth.calaelen | CSS | 8 | 15.06.2006 15:57 |