Verwenden Sie CSS, um ein Webdesign mit großem Hintergrund zu realisieren

Autor：Eve Cole Aktualisierungszeit：2009-06-12 17:52:52

Seit der Autor die große Hintergrund-Webdesign-Sammlung veröffentlicht hat, habe ich viele E-Mails mit der Frage erhalten, wie man mit CSS ein großes Hintergrund-Webdesign erreichen kann. Aus diesem Grund habe ich beschlossen, die Designfähigkeiten großer Hintergrundwebsites mit Ihnen zu teilen. In diesem Tutorial werde ich anhand einiger Beispiele veranschaulichen, wie man mit ein oder zwei Bildern das Design einer großen Hintergrundwebsite erreicht.

Häufige Fehler: Der Hintergrund ist beschnitten.

Beim Betrachten der Beispieldatei gibt es kein Problem, wenn die Auflösung kleiner als 1280 ist. Wenn Ihr Monitor jedoch eine Auflösung von mehr als 1280 Pixeln hat, sehen Sie andere Teile als das Hintergrundbild.

Einfache Lösung des Problems: Stellen Sie die Kantenfarbe des Bildes auf die gleiche Farbe wie die Hintergrundfarbe der Webseite ein. Hier verwende ich Web Designer Wall als Beispiel. Beachten Sie, dass die Ränder des Bildes einfarbig sind.

CSS-Teil

Dieser Teil ist sehr einfach: Legen Sie das Hintergrundbild für das Körperelement fest (in der Mitte oben positioniert).

Das Folgende ist der CSS-Code:

Körper {
Polsterung: 0;
Rand: 0;
Hintergrund: #f8f7e5 url(wdw-bg.jpg) keine Wiederholung, Mitte oben;
Breite: 100 %;
Anzeige: Tisch;
}

Beachten Sie, dass es in der Textauswahl zwei zusätzliche Zeilen gibt. Dies soll verhindern, dass sich das Hintergrundbild ändert, wenn das Browserfenster kleiner als die Inhaltsbreite ist, was in Firefox der Fall ist.