Ein Hintergrundbild auf einer Website zu platzieren ist eine fünfminütige Angelegenheit. Viel mehr Zeit wird für die Vorbereitung des Bildes aufgewendet - Auswahl, Anpassung, Hinzufügen von Effekten, Zusammensetzen mehrerer Illustrationen in einer Grafikdatei.
Anleitung
Schritt 1
Das Hintergrundattribut ist für die Verwaltung des Hintergrunds verantwortlich. Um die Seite gleichmäßig mit einer einzigen Farbe zu füllen, verwenden Sie das style-Tag in body:. Der Hintergrund wird schwarz sein. Wenn Sie CSS verwenden, geben Sie Folgendes in Ihren Kopf ein: body {background-color: # 000000;}
Schritt 2
Mit Hilfe eines Links wird ein sich wiederholendes Bild gesetzt. Die Adresse wird als externer oder interner Link angegeben. Bei dieser Methode ist es wichtig, dass die Nähte zwischen den Bildern unsichtbar bleiben, sonst sieht die Seite schlampig aus. Verwenden Sie in CSS: body {background-color: # 000000; background-image: url (images / pattern.png);}.
Schritt 3
Die Wiederholung des Musters kann gesteuert werden. Background-Repeat ist für diese Funktion verantwortlich zusammen mit folgenden Elementen: - Repeat-x - Horizontale Wiederholung - Repeat-y - Vertikale Wiederholung: - Repeat - Wiederholung in beide Richtungen - No-Repeat - Ohne Wiederholung this: body {background-color: # 000000; Hintergrundbild: URL ("schmetterling.gif"); Hintergrundwiederholung: keine Wiederholung; }
Schritt 4
Die Hintergrundposition hilft, das Bild im gewünschten Teil der Webseite zu positionieren. Koordinaten können mit Prozent (50% 75%), Zentimetern (5cm 5cm), Pixelseitenverhältnis (200px 400px), Wortform (links, rechts, oben, Mitte, unten) eingestellt werden. Zum Beispiel: body {background-color: # 000000; Hintergrundbild: URL ("schmetterling.gif"); Hintergrundwiederholung: keine Wiederholung; Hintergrundanhang: behoben; Hintergrundposition: links unten; } Der Wert 0% 0% ist gleich oben links.
Schritt 5
Die Eigenschaft background-attachment gibt an, ob die Bilder mit der Seite gescrollt werden (background-attachment: scroll) oder nicht (background-attachment: fixed).
