Frage Hintergrundgrafik

[Oper@ter]

Hallo Leute,

ich möchte eine Hintergrundgrafik erstellen, die sich über die gesamte Fläche meiner Webseite streckt, aber nicht wiederholt.

So dass man sich die Webseite mit 1024x768px oder mit 1280x900px angucken kann.


Könnt ihr mir sagen, wie ich dies machen kann?

Wäre echt klasse danke schön!

 

[threadi]

Eine saubere Lösung gibt es dafür nicht. Es ist nicht möglich Hintergrundbilder zu strecken, so dass sie auf bestimmte Auflösungen passen.

Es gibt jedoch einige Tricks mit denen man das "Simulieren" kann:

Entweder man bindet das Bild als absolut positioniertes Bild (mit <img>-Tag) ein und sagt diesem, dass es 100% Höhe und Breite einnehmen soll. Dann passt es sich an die Auflösung an.

Oder: man nutzt die Erkennung der Auflösung des Besuchers. Geht mittels PHP oder JavaScript. Allerdings ist dies sehr unzuverlässig und führt oft auch zu falschen Ergebnissen.

 

[prm]

Wenn es nicht unbedingt erforderlich ist, dass immer die Grafik komplett angezeigt wird, dann könntest du eine ausreichend große Grafik erstellen, die als Hintergrund zentral positionieren und nach dieser Methode vorgehen: http://www.ohne-css.gehts-gar.net/0030.php
Allerdings ergeben sich auch bei dieser Methode dann u.U. auch Ränder, wenn der Viewport größer als die Grafik ist.

 

[Efchen]

Entweder man bindet das Bild als absolut positioniertes Bild (mit <img>-Tag) ein und sagt diesem, dass es 100% Höhe und Breite einnehmen soll. Dann passt es sich an die Auflösung an.

Ehm...*räusper*...ich möchte darauf hinweisen, dass CSS keine Ahnung von der Bildschirmauflösung des Nutzers hat und 100% sich nicht auf die Auflösung, sondern immer nur auf das Elternelement (und wenn man das nach ganz oben zurückverfolgt auf den Viewport) bezieht.

Oder: man nutzt die Erkennung der Auflösung des Besuchers. Geht mittels PHP oder JavaScript. Allerdings ist dies sehr unzuverlässig und führt oft auch zu falschen Ergebnissen.

Genau. Weil die Auflösung bei der Erstellung von Websites nämlich keine Rolle spielt.

Danke für Ihre Aufmerksamkeit (SCNR), :-)
-Efchen

 

[ingoS]

cssplay.co.uk hat natürlich auch hierfür eine Lösung gefunden:
stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation
Wie sinnvoll das ist, musst du allerdings selber entscheiden.

 

[neuroleptika]

cssplay.co.uk hat natürlich auch hierfür eine Lösung gefunden:
stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation
....

Das ist doch genau das, was threadi beschrieben hat.

 

[ingoS]

Das ist doch genau das, was threadi beschrieben hat.

Ich hatte Efchens Einwand falsch verstanden und nicht richtig nachgedacht. Bitte nicht hauen. :|