HTML, Hintergrundbildgröße automatisch anpassen

[trainspotting]

Hallo,

ich möchte eine HTML-Seite ins Netz stellen, die lediglich ein Hintergrundbild beinhaltet, also der Bildschirm ist komplett ausgefüllt. Ist es möglich, dass man es so einstellen kann, dass die Bildgröße sich automatisch an die Bildschirmauflösung bzw. die Fenstergröße des Betrachters anpasst?

 

[yoT!mO]

Mit HTML ist es nicht möglich, aber mit Javascript. Leider kenn ich mich damit so gut wie gar nicht aus.

Gruß Timo

 

[Mr_Bishop]

Lediglich ein Hintergrundbild beinhaltet?
Man könnte es auch als Bild mit 100% Breite anzeigen.

Falls du damit verhindern möchtest, dass man es einfach herunterladen kann, kannst du auch Divisions verwenden? Wenn es auch kein echtes Hindernis ist.

 

[Standar(D!)]

Mit HTML nicht, das ist richtig. Es gibt aber eine Umsetzung per CSS.
Schau mal bei Stu Nicholls: http://www.cssplay.co.uk/layouts/background.html
Nachteil: Bild wird verzerrt dargestellt.
Viele Grüße
Standar(D!)

 

[trainspotting]

Hmm, verzerrt sollte es nach Möglichkeit nicht sein. Was ich will ist folgendes: eine Seite mit Bild und 1-2 Zeilen Text. Das ganze soll bei jedem Betrachter ordentlich aussehen, mehr nicht. Es muss nicht unbedingt explizit als body background eingefügt werden, ich hab nur keine andere Idee bis jetzt. Wie gesagt, es soll nur bei jedem gut aussehen. Das Bild, um das sich alles dreht, ist ein Wallpaper in der Größe 1680x1050.

 

[Mr_Bishop]

Ich bin mir sicher, du wirst mit Div dein Problem lösen könen.
Seiten wie http://www.devmag.net/html/css_ebenen.htm werden dir sicher weiterhelfen.

Legst du zB ein Div mit 100% Breite an, in das du das Bild mit 100% Breite einbettest, kannst du auf die gleiche Weise ein Div direkt darüber legen, in das du den Text schreibst.

<div style="position: fixed; top:0; width:100%; height:100%;z-index:1;"><img src="..." ...></div>
<div style="position: fixed; top:0; width:100%; height:100%;z-index:10;">Text 1234<br>....</div>

Im Grunde ist das die CSS-Lösung, von der schon gesprochen wurde...

 

[Darii]

Hmm, verzerrt sollte es nach Möglichkeit nicht sein. Was ich will ist folgendes: eine Seite mit Bild und 1-2 Zeilen Text.

Ohne Verzerrungen geht das nur mit css3 oder Javascript.

Einfach auf den body anwenden:

background-size: 100% auto;

Da diese Eigenschaft noch von keinem Browser erkannt wird, musst du stattdesssen die folgenden Browserspezifischen Eigenschaften nehmen(am besten zusammen mit der obigen):

-o-background-size: 100% auto;
-webkit-background-size: 100% auto;
-khtml-background-size: 100% auto;

funktioniert im Opera, Safari und Konqueror. Je nachdem ob das Bild breiter als hoch ist oder nicht musst du evtl. 100% und auto vertauschen.

 

[EarlMcearly]

dankeschön hat mir auch geholfen^^

 

[Daaron]

http://hafencity-dresden.com
Anschauen und lernen. So funktionieren skalierende Hintergründe ohne Verzerrung (und n ganz paar andere nette Tricks).
Hier wird auf JS gesetzt, um auch Deppen im IE8 (und niedriger) mit nem ordentlichen Hintergrund zu versorgen. Die Skalierung funktioniert aber auch bei abgeschaltetem JS, dann wird auf CSS3 zurück gegriffen.