Probleme mit Hintergrundgrafik im BODY-Element

[julchen]

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

 

[Maik]

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

 

[Gumbo]

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

 

[julchen]

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

Gruss
holli

 

[tobee]

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

Tobee

 

[Maik]

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

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

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

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

 

[julchen]

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

 

[Maik]

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

<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.

 

[Gumbo]

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.

 

[Sven Mintel]

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

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.