Hallo,
ich habe ein Problem mit einer Grafik die im background des body dargestellt wird. Wenn ich eine kleinere Auflösung z. B. 800 x 600 oder 1024 x 768 einstelle, schneidet der Browser das Bild am unteren Rand ab obwohl dieses noch größer ist und nach unten hin "ausläuft". Bei höheren Auflösungen ist das kein Problem.

Gibt es da einen Trick, womit ich das komplette Bild im background dargestellt bekomme, ohne das der Browser mir am unteren Ende das Bild abschneidet?

Hier der Link: http://www.assedo.de/kunden/becker/index.html

Gruss
holli

Eine Hintergrundgrafik lässt sich (noch) nicht entsprechend der Bildschirmauflösung skalieren.

Noch nicht. Mit CSS3 wird die background-size-Eigenschaft eingeführt, mit der das möglich sein wird. Doch das ist noch Zukunftsmusik.

Hallo,
was und wie würdet Ihr es dann machen?

Gruss
holli

Ich würde vllt. 3 verschiedene backgrounds erstellen.
Dann mit JavaScript (screen.availHeight und screen.availWidth) denn passenden Hintergrund als background-image laden.

Tobee

Um eine Grafik mit CSS skalieren zu können, muß sie (noch) als img-Element in das Dokument eingebunden werden.

HTML-Code:

<img src="" id="background" alt="" title="">

Code :

1 2 3 4

img#background { width: 100%; height: 100%; }

Ob sich das Ergebnis qualitativ auch sehen lassen kann, vermag ich nicht zu beurteilen.

Hallo,
das mit dem Javascript hab ich noch nie gesehen. Könntest Du mir den ganzen Code dafür mal posten, oder sagen wo ich den finde?

Gruss
holli

Dieses Script ermittelt mittels screen.width die Bildschirmbreite und schreibt per document.write() die entsprechende CSS-Datei in das Dokument:

HTML-Code:

<script type="text/javascript">
<!--
if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="800.css">');
alert("Style Sheet für 800 x 600 wäre geladen worden.");
}
else if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="1024.css">');
alert("Style Sheet für 1024 x 768 wäre geladen worden.");
}
else if (screen.width == 1280) {
document.write('<link rel="stylesheet" type="text/css" href="1280.css">');
alert("Style Sheet for 1280 x 960 wäre geladen worden.");
}
//-->
</script>

Auf diese Weise lässt sich für jede Bildschirmauflösung das maßgeschneiderte Layout mit der entsprechend dimensionierten Hintergrundgrafik in die Seite laden.

Es wäre doch viel sinnvoller, mit den Größen des tatsächlichen Darstellungsfelds zu arbeiten statt mit der Bildschirmauflösung. Lies dir dazu mal „Dynamic Resolution Dependent Layouts“ von Kevin Hale durch.

Das Ganze hat ...womit man es auch macht, einen Haken...Michael hat ihn schon angesprochen:

Zitat von michaelsinterface

Ob sich das Ergebnis qualitativ auch sehen lassen kann, vermag ich nicht zu beurteilen.

allerdings:

Auf diese Weise lässt sich für jede Bildschirmauflösung das maßgeschneiderte Layout mit der entsprechend dimensionierten Hintergrundgrafik in die Seite laden.

Auflösung gut und schön... bloss entscheidend ist das Browserfenster.

Wenn du also nicht den Vorschlag mit dem gestreckten <img> mit seinen ggf. verpixelten Nachteilen nehmen willst, dann wirst du damit leben müssen, dass vom Hintergrund etwas abgeschnitten wird, weil du nie weisst, wie gross der Benutzer das Browserfenster hat.

kleiner Hinweis mal ganz nebenbei:

Bei dem obigen Script wird nur nach drei Breiten abgefragt (800, 1024 und 1280).

Was ist, wenn der User ein 16:9 Monitor besitzt? Dann hat man anscheinend ein Problem

Nur nach If-Bedingungen abzufragen ohne einen Else-Zweig ist nicht gerade gut.
Und was man in den Else-Zweig für Einstellungen macht, ist dann das nächste Problemchen.

Andernfalls sollte man es mit Vergleichoperatoren versuchen (kleiner als, größer als). So kann man wirklich alle Auflösungen abdecken

Gruß,

Isac

Die Bildschirmgröße sagt nichts über die tatsächliche Fenstergröße aus, was wiederum nichts über die tatsächliche Größe des Darstellungsfelds aussagt. Siehe dazu auch Simon Collisons „The importance of window-width“ mit einer interessanten Statistik.