Tutorials von Thomas Frei-Herrmann
Hintergrund Bild an Browser anpassen Skript
Verkleinere das Browser-Fenster, indem Du es zusammen schiebst, um den Effekt zu sehen.
Hintergrundbild "Mittelmeer-Abendrot-Inseln" von bilder.n3po.com
Hier erstellt mit NOF 12 und der HTML-Ausgabe XHTML. Vielen Dank für den Hinweis auf dieses Skript an Zappe
http://it-runde.de/7788/hintergrundbild-passt-sich-an-browsergrose-an-css-3
Vergesst nicht, das Bild zunächst in Euer Verzeichnis “images” zu kopieren. Der relative Pfad (hier mit 2 Punkten von einer Unterseite) müsste auf der Startseite nur 1 Punkt haben, also dann ./assets/images/DeinHintergrundbild.jpg
oder setzt anstelle dessen die absolute URL ein: http://www.DeineDomain.de/assets/images/DeinHintergrundbild.jpg
> auf Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > Skript “Zwischen Head Tags” einfügen und fertig
<style type="text/css">
html {
background: url(../assets/images/DeinHintergrundbild.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Wenn Ihr das auf allen Seiten Eures Projektes haben wollt, dann könntet Ihr das Skript auch in die “Master-Rahmen-HTML” einbringen. Achtet dann wieder auf die korrekte relative Pfadangabe und gebt der Startseite (mit 1 Punkt) einen anderen Master-Rahmen-Namen oder verwendet die absolute URL.
Achtet darauf, dass Euer Hintergrundbild eine ausreichende Größe hat - mindestens 1280 Pixel oder größer, denn ältere IE füllen den Bildschirm nur bis zu der maximalen Breite des Bildes.