• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild immer auf Vollbild ohne verzerren

NachtMensch

Neues Mitglied
Hallo liebe Forumsgemeinde!
Wie im Titel steht bin ich grad dabei ein Hintergrundbild so auszurichten, daß es immer über die ganze Anzeigefläche des Browsers geht.
Klappt soweit ganz gut bis auf wenn die Inhalte länger sind als die Anzeigefläche. In dem Fall habe ich wenn man dann nach unten scrollt nur noch weiße Flächen. Habe jetzt background-repeat: repeat-y eingestellt aber das ist auch keine Lösung, da sich das Bild einfach nur nach unten wiederholt und nicht beim scrollen mitwandert wie ich es gerne hätte.
Und im IE 8 klappt es garnicht wie ich grad feststellen mußte!

Hier mein Code:

Code:
<script type="text/javascript"> var zufall = Math.round(2 * Math.random()) + 1; document.write('<body style="background: URL(img/bg' + zufall + '.jpg); background-repeat: repeat-y; background-position:50% 0%; background-size: 100%;">') </script>
 
Zuletzt bearbeitet:
Ich würde es gern über JS lösen da die CSS Lösungen nur von recht wenig Browsern unterstützt werden wie ich gelesen habe oder bin ich damit auf dem Holzweg?
 
Wenn man den gesamten body fixiert, kann man niet mehr scrollen, und ein fixiertes extra-div nur für den BG ist zu umständlich

Eher ein background-attachment: fixed
(background-attachment: Hintergrund fixieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets)


edit:
Ich würde es gern über JS lösen da die CSS Lösungen nur von recht wenig Browsern unterstützt werden wie ich gelesen habe oder bin ich damit auf dem Holzweg?

Selfhtml ist von 2007. Damals war der IE7 oder FF2 noch ein "moderner Browser"
 
Eher ein background-attachment: fixed
(background-attachment: Hintergrund fixieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets)


edit:

Selfhtml ist von 2007. Damals war der IE7 oder FF2 noch ein "moderner Browser"

Vielen dank, dien Beitrag war sehr hilfreich für mich! background-attachment: fixed hat gereicht um zu bewirken was ich wollte!


Edit: jetzt besteht nur noch das Problem mit dem IE 8 und kleiner, bei dem scrollt das Bild zwar mit aber breitet sich leider nicht über den ganzen Anzeigebreich aus. IE unterstützt wohl erst ab Version 9 background-size :-(
Hat jemand da eine Idee wie ich das lösen kann?
 
Zuletzt bearbeitet:
Ein weiteres Problem besteht leider auch noch, ich habe dem Hintergrundbild noch keine mindest Größe zugewiesen, weshalb es bei Auflösungen, die kleiner sind als das Bild breit ist schrumpft.

Code:
<script type="text/javascript"> var zufall = Math.round(2 * Math.random()) + 1; document.write('<body style="background: URL(img/bg' + zufall + '.jpg); background-repeat: no-repeat; background-position:50% 0%; background-size: 100%; background-attachment:fixed;">') </script>

Wo sollten die min-height und min-width Angaben an besten hin oder sollte ich das anders lösen?
 
Jetzt habe ich den halben Tag recherchiert aber komme einfach nicht weiter:-?
Wer kann mir mal einen Tip geben wie ich meinem Background-Image eine mindest Größe zuordne?
 
So ich habe es jetzt soweit hinbekommen, stehe jetzt aber vor einem neuen Problem.
Das Hintergrundbild hört plötzlich bei der Höhe 575px auf, das ist die original Höhe des Bildes und auch die Höhe des main divs aber warum es jetzt beim Hintergundbild auf der Höhe endet kann ich leider nicht nachvollziehen. HIER mal eine Demo, hoffe jemand kann mir sagen wo der Fehler liegt, ich sehe den Code vor lauter Zeilen nicht mehr...
 
Zurück
Oben