Die Möglichkeit, das Hintergrundbild mit CSS auf die volle Breite des Browserfensters zu strecken, erschien erst mit der Veröffentlichung der neuesten Spezifikation - CSS3. Leider verwenden bisher viele Websurfer frühe Browser, die die CSS3-Spezifikation nicht verstehen. Daher müssen Sie eine Wahl treffen - entweder eine weniger bequeme, aber browserübergreifende Lösung oder eine High-Tech-Lösung für ein begrenztes Publikum verwenden. Betrachten wir beide Optionen.
Notwendig
Grundkenntnisse in HTML und CSS
Anweisungen
Schritt 1
Die erste Option basiert auf früheren Spezifikationen der CSS-Sprache. Sie müssen eine HTML-Codestruktur erstellen, die zwei überlappende Ebenen übereinander hat. Ebenen (div) können in der alten Beschreibungssprachenspezifikation für kaskadierende Stile auf die Breite des Bildschirms gestreckt werden. Unten in den Ebenen müssen Sie das Hintergrundbild platzieren und in der oberen den gesamten Inhalt der Seite. Eine solche Struktur im Hauptteil des Dokuments könnte wie folgt aussehen:
Dies wird der Inhalt der Seite sein
Und die Beschreibung der Stile für diese Struktur sollte im Überschriftenteil platziert werden. Zum Beispiel dies:
html, Körper {
Rand: 0px;
Höhe: 100%;
}
#Hintergrund {
Position: absolut;
Breite: 100 %;
Höhe: 100%;
}
#Karosserie {
Position: absolut;
Breite: 100 %;
Höhe: 100%;
z-Index: 2;
}
Hier werden die Ebenen mit IDs background (das ist dein Hintergrundbild) und body (das ist die Ebene für den Seiteninhalt) auf absolute Positionierung und 100% Breite und Höhe gesetzt. Außerdem wird der Inhaltsebene eine fortlaufende Nummer z-index = 2 zugewiesen. Sie bestimmt die "Tiefe" der Ebenen - je größer sie ist, desto weiter "unten" befindet sich diese Ebene. In unserem Fall befindet sie sich über der Hintergrundebene, die den Standard-Z-Index verwendet.
Schritt 2
Der vollständige Code könnte so aussehen:
html, Körper {
Rand: 0px;
Höhe: 100%;
}
#Hintergrund {
Position: absolut;
Breite: 100 %;
Höhe: 100%;
}
#Karosserie {
Position: absolut;
Breite: 100 %;
Höhe: 100%;
z-Index: 2;
}
Dies wird der Inhalt der Seite sein
Vergessen Sie nicht, den Dateinamen des Hintergrundbildes fon.
Schritt 3
Die zweite Option verwendet die in CSS3 eingeführte background-size-Eigenschaft. Fügen Sie gleichzeitig ähnliche Eigenschaften zu den Stildefinitionen hinzu, die zuvor von den Browsern Mozilla Firefox, Google Chrome und Opera verwendet wurden. Der Stilbeschreibungsblock in dieser Version kann wie folgt aussehen:
html {
Hintergrund: URL (fon.png) No-Repeat Center Center behoben;
-Webkit-Hintergrundgröße: Cover;
-moz-Hintergrundgröße: Abdeckung;
-o-Hintergrundgröße: Abdeckung;
Hintergrundgröße: Cover;
}
Und hier vergessen Sie nicht, den Dateinamen des Hintergrundbildes fon.png"
