Da der Autor eine Sammlung großer Hintergrund -Webdesigns veröffentlicht hat, habe ich viele E -Mails erhalten, in denen gefragt wurde, wie man CSS verwendet, um ein großes Hintergrund -Webdesign zu implementieren. Daher habe ich beschlossen, Ihnen die Designfähigkeiten der Website im Hintergrund mitzuteilen. In diesem Tutorial werde ich einige Beispiele verwenden, um zu veranschaulichen, wie Sie ein oder zwei Bilder verwenden, um das Design einer großen Hintergrundwebsite zu implementieren.
Häufige Fehler: Hintergrund wird geschnitten
Wenn man sich die Beispieldatei ansieht, gibt es kein Problem, wenn sie weniger als 1280 Auflösung beträgt. Wenn Ihr Monitor jedoch eine Auflösung von mehr als 1280 Pixel aufweist, sehen Sie den Teil außerhalb des Hintergrundbildes.
Eine einfache Lösung für das Problem: Stellen Sie die Farbe der Bildkante auf die gleiche Farbe wie den Hintergrund der Webseite. Hier verwende ich die Webdesigner -Wand als Beispiel, schaue mir das Bild unten an und beachten Sie, dass die Ränder des Bildes feste Farben sind.
CSS -Teil
Dieser Teil ist einfach. Setzen Sie das Hintergrundbild für das Körperelement (in der Mitte, oben)
Hier ist der CSS -Code:
Körper { Polsterung: 0; Rand: 0; Hintergrund: #F8F7E5 URL (WDW-BG.JPG) No-Repeat Center Top; Breite: 100%; Anzeige: Tabelle; } |
Achten Sie darauf, dass es im Körperwähler zwei zusätzliche Linien gibt, damit sich das Hintergrundbild ändert, wenn das Browserfenster kleiner als die Inhaltsbreite ist, die in Firefox erscheint.