Hintergrundbild nach Screencheck laden

[Pfeiloor]

Hallo,

ich versuche seit Stunden verzweifelt ein Hintergrundbild über einen Screencheck zu laden. Das Ganze hat den Sinn das mein im Body voreingestelltes Hintergrundbild (no-repeat und positioniert) für Auflösungen unter 1024x768 zu groß ist und das ganze Layout zerreißt. Ich möchte nun die Auflösung auslesen und für den Fall das jemand eine geringere Auflösung hat ein kleineres Hintergrundbild eintauschen.

Ich dachte eigentlich das es so funktionieren müßte, tut es aber nicht:

if(screen.width<1024)
document.body.style.background = 'url('bg.jpg')';

so aber auch nicht:

if(screen.width<1024)
document.getElementsByTagName('body')[0].background = 'bg.jpg'

Weiß jemand weiter?

[Der Martin]

Moin,

[...] das mein im Body voreingestelltes Hintergrundbild (no-repeat und positioniert) für Auflösungen unter 1024x768 zu groß ist und das ganze Layout zerreißt.

dann machst du irgendwas gravierend falsch. Das Hintergrundbild beeinflusst das Layout normalerweise überhaupt nicht. Es wird -wenn das zugehörige Element kleiner ist als das Bild- einfach an den Rändern abgeschnitten und gut is'.

Ich möchte nun die Auflösung auslesen und für den Fall das jemand eine geringere Auflösung hat ein kleineres Hintergrundbild eintauschen.

Dir ist hoffentlich klar, dass die Bildschirmauflösung *überhaupt nichts* mit der Größe des Browserfensters zu tun hat?

Ich dachte eigentlich das es so funktionieren müßte, tut es aber nicht:
if(screen.width<1024)
document.body.style.background = 'url('bg.jpg')';

Achte auf die Anführungszeichen: Wo fängt der String an, wo hört er auf? Du weist der background-Eigenschaft den Wert 'url(' zu, danach kommt noch etwas sinnloses Kauderwelsch, was zu einen Syntaxfehler führt und letztendlich dazu, dass die Anweisung nicht ausgeführt wird. Das hättest du aber auch an der Browser-Fehlermeldung erkennen müssen.

so aber auch nicht:
if(screen.width<1024)
document.getElementsByTagName('body')[0].background = 'bg.jpg'

Hat das body-Element eine Eigenschaft background? Im IE könnte das aus Kulanz funktionieren.

Aber nochmal: Es ist unsinnig, irgendwelche Anzeigedetails abhängig von der Bildschirmgröße zu setzen. Wenn überhaupt, dann frage die Größe des Browserfensters ab, nicht des Bildschirms.
Für ein simples Hintergrundbild sollte aber IMHO nicht einmal das nötig sein. Denn es vermittelt ja keinen relevanten Inhalt, sondern ist nur Dekoration. Gestalte es also so, dass die wesentlichen Bildbereiche auch bei geringen Fenstergrößen sichtbar sind, und dass der Hintergrund bei größerem Fenster gleichmäßig in eine Hintergrundfarbe ausläuft.

So long,
 Martin

[Pfeiloor]

dann machst du irgendwas gravierend falsch. Das Hintergrundbild beeinflusst das Layout normalerweise überhaupt nicht. Es wird -wenn das zugehörige Element kleiner ist als das Bild- einfach an den Rändern abgeschnitten und gut is'.

Bitte keine Designdiskussionen vom Zaun brechen, in meinem speziellen Fall ist es nunmal so das das Hintergrundbild keine bloße Deko ist.

Dir ist hoffentlich klar, dass die Bildschirmauflösung *überhaupt nichts* mit der Größe des Browserfensters zu tun hat?

Ja, nur macht es keinen Sinn die Größe des Browserfensters auszulesen und dazu zig tausend variable Bilder anzufertigen, ich möchte nur erreichen das Nutzer unter 1024px den bg vernünftig dargestellt bekommen, dabei gehe ich davon aus das sie dies mit einem maximierten Fenster betrachten.

Achte auf die Anführungszeichen: Wo fängt der String an, wo hört er auf? Du weist der background-Eigenschaft den Wert 'url(' zu, danach kommt noch etwas sinnloses Kauderwelsch, was zu einen Syntaxfehler führt und letztendlich dazu, dass die Anweisung nicht ausgeführt wird. Das hättest du aber auch an der Browser-Fehlermeldung erkennen müssen.

Endlich zum Thema. Danke erstmal für den Tipp, ich hatte es im Quelltext schon richtig nur hier wohl gestern Nacht falsch eingetragen. Also richtig is wohl so und funktioniert trotzdem nich:
document.body.style.background = 'url(bg.jpg)';

Hat das body-Element eine Eigenschaft background? Im IE könnte das aus Kulanz funktionieren.

Ja hat es, funktioniert aber auch im IE nicht. Was allerdings funktioniert ist wenn ich dem ganzen eine Funktion zuweise und diese per href manuell ausführe. Das geht dann sogar im FF.

Hat jemand eine andere Idee?

Vielen Dank,
Stefan

[rfb]

Moin

Hat jemand eine andere Idee?

hast du mal den vollständigen Quelltext?

Gruß
rfb

[Pfeiloor]

Moin

Hat jemand eine andere Idee?
hast du mal den vollständigen Quelltext?

Gruß
rfb

Na klar gern, ich poste hier aber nur den relevanten Teil, sonst wirds sehr lang:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript">
button= new Image();
button.src = "grafik/orange.jpg";

if(screen.width<1024)
document.body.style.background = 'url(grafik/grau.jpg)';
</script>
<title>Treppenhaus</title>
<base target="main">
</head>
<body background="grafik/bgtreppen.jpg">

[rfb]

Moin

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript">
button= new Image();
button.src = "grafik/orange.jpg";

du willst hier

if(screen.width<1024)
document.body.style.background = 'url(grafik/grau.jpg)';
</script>

Eigenschaften eines Elements ändern,

<title>Treppenhaus</title>
<base target="main">
</head>

das erst hier unten entsteht:

<body background="grafik/bgtreppen.jpg">

Tipp: window.onload

Gruß
rfb

[Pfeiloor]

DANKE!!!
Manchmal hat man echt n Brett vorm Kopf :-). Um das Ganze zum laufen zu bringen reicht es die Script-Anweisung einfach nach dem Body-Tag einzufügen. Funktioniert wunderbar in IE & FF.