Die HTML-Markup-Sprache ermöglicht es einem Webdesigner, jedes beliebige Bild als Hintergrundbild zu verwenden. Der Sprache selbst fehlen jedoch integrierte Steuerelemente für Hintergrundbilder. Weitere Feinabstimmungen werden mit kaskadierenden CSS-Stylesheets vorgenommen.
Anleitung
Schritt 1
Damit sich der Hintergrund auf die volle Breite des Browsers ausdehnt, müssen Sie den Parameter z-index in Ihrem CSS verwenden. Sie können die Reihenfolge der von Ihnen erstellten Elemente festlegen. Je höher der Wert dieses Attributs ist, desto höher befindet sich der Block auf der Seite.
Schritt 2
Erstellen Sie neue Dokumente im HTML- und CSS-Format (rechte Maustaste - "Neu" - "Textdatei") und öffnen Sie diese mit einem beliebigen Texteditor.
Schritt 3
Platzieren Sie das Hintergrundbild auf der unteren Ebene. Es wird sich je nach Bildschirmauflösung strecken. Oben befindet sich ein weiteres Element, auf dem der Seiteninhalt angezeigt wird. Erstellen Sie dazu zwei Blöcke. Schreiben Sie in die CSS-Datei:.1layer {Z-Index: 1; Breite: 100% Höhe: 100% Position: Absolut;} 2layer {Position: Absolut; Z-Index: 2; } Mit dem Parameter position: absolute können Sie die absolute Positionierung einstellen, d.h. die Ebene wird unabhängig von anderen Elementen positioniert.
Schritt 4
Fügen Sie den generierten CSS-Code mit dem Link-Tag in die HTML-Datei ein: Seitenhintergrund
Schritt 5
Erstellen Sie eine neue Ebene. Verwenden des Tags
lege ein Bild darauf. Zum Beispiel: Seiteninhalt Für img wird nur der Parameter width angegeben, denn wenn Sie zusätzlich height angeben, kommt es in einigen Browsern zu Bildverzerrungen.
Schritt 6
Speichern Sie Ihre Änderungen. Um Ihren Code zu testen, vergrößern Sie die Seite in Ihrem Browserfenster. Das Hintergrundbild sollte ebenfalls vergrößert werden.
