Zur Navigation

Auflösung 1280x800

1 maschu

Der Inspiron 6000 von Dell hat zwar ein 15" Display aber eben nur die Diagonale stimmt gegenüber den normalen 15" Displays, nicht so das Verhältnis Breite zur Höhe.

Die Display-Breite beträgt 13 inch die Höhe 8.2 inch

Stellt man nun eine normale Seite die auf 1024x768 dpi ausgelegt ist mit der Auflösung 1280x800 dar, so wird die Seite zwar normal dargestellt, solange kein
Hintergrundbild im Spiel ist.

Mit einem Hintergrundbild von 1024x768 erfolgt eine Kachelung (Wiederholung des Hintergrundes). Stellt man die Display-Grafik um auf 1024x768 stimmt zwar die Höhe, aber die Breite wird gestreckt, was dann zu einem Bildverzug führt.

Das Problem der Kachelung lässt sich mittels css umgehen, indem das Hintergrundbild dort wie folgt definiert wird.:

CSS:

body
{ background-image: url(/images/index/hg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}

Damit ist das Problem für IE gelöst, nicht aber für alle anderen Browser.

Wie kann ich allen Browsern gerecht werden?

17.03.2006 15:14 | geändert: 18.03.2006 06:56

2 C)-(iLL@

Damit ist das Problem für IE gelöst, nicht aber für alle anderen Browser.

Was genau ist das Problem? Ich glaube jedenfalls nicht, dass es am Browser liegt. Denn wenn ich schreibe

body {
background:url(/images/index/hg.jpg) no-repeat center top scroll;
}

dann funktioniert das auf allen Browsern gleich.

Was die Anzeige anbelangt, also die horizontale Stauchung des Bildes, dann ist das Problem des Seitenverhältnisses hardwarebedingt. 1024x768 entspricht einem Seitenverhältnis von 4:3, 1280x800 ca. 5:3 (Widescreen).

17.03.2006 16:22

3 Jörg

Kann mich da auch nur anschließen mit der Frage: was machen die anderen Browser denn anders? die aufgeführten CSS-Eigenschaften verursachen jedenfalls keine unterschiedliche Darstellung des Hintergrundes

18.03.2006 09:21

4 maschu

also...

habe mal alles ausprobiert und kann folgendes berichten:

Version1:
body
{ background-image: url(/images/index/hg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}

Resultat:
IE zeigt Hintergrundbild, zentriert es und Kachelung wird unterdrückt
Opera: unterdrückt das Hintergrundbild
FF: unterdrückt das Hintergrundbild

Version2:

body {
background:url(/images/index/hg.jpg) no-repeat center top scroll;
}

Resultat:
IE zeigt Hintergrundbild, zentriert es und Kachelung wird unterdrückt
Opera: unterdrückt das Hintergrundbild
FF: unterdrückt das Hintergrundbild


Ich bin der Meinung, irgendwo mal gelesen zu haben, dass dies IE-spezifische Definitionen sind, lasse mich aber gerne eines Bessern belehren. Ich bin erstaunt darüber, dass diese CSS-Definition bei Euch funktionieren soll. Ich teste hier mit 2 Labtop, einmal mit 4:3 Screen das andere Mal mit Widescreen 5:3.

(PS: musste noch eine Korrektur anbringen wegen Fehleingabe)

18.03.2006 10:16 | geändert: 18.03.2006 10:28

5 YuryR

normalerweise müsste das jeder browser richtig anzeigen..

http://www.css4you.de/background.html

18.03.2006 10:52

6 maschu

Nachtrag:

getestet mit

Opera 7.22
FF 1.5
IE 6.0

18.03.2006 11:05

7 Jörg

Vielleicht finden Firefox und Opera das Hintergrundbild nicht - wo testet du die Seite: auf einem Rechner ohne Webserver? Der Pfad "/images/index/hg.jpg" ist ohne Webserver eigentlich nicht auflösbar; ich erinner mich an einen Fall, in welchem der IE im Gegensatz zu den anderen Browsern unter bestimmten Bedingungen auch ohne Webserver absolut referenzierte Dateien gefunden hat. Besteht das Problem auch noch, wenn du die Seite von einem Server abrufst?

18.03.2006 11:06

8 maschu

ich rufe die Seite nur vom Server ab

18.03.2006 11:12

9 maschu

wenn ich in der css die Definitionen der Schriften-Definitionen lösche und nur das background-Bild definiere als:

body {background:url(/images/index/hg.jpg) no-repeat center top scroll;}

dann zeigt der FF das Backgroundbild ebenfalls, der Opera aber immer noch nicht. Die CSS enthält jetzt also nur noch eine einzige Zeile.

18.03.2006 11:24 | geändert: 18.03.2006 11:24

10 maschu

es scheint für alle Browser zu funzen, wenn die Backgrounddefinition ganz am Ende der CSS steht. Die Schriftdefinitionen sind jetzt wieder alle drin. Komisch aber zum Glück reproduzierbar.

besten Dank für die Antworten

18.03.2006 11:28 | geändert: 18.03.2006 11:32