Wenn du bist eine Website gestalten, möchten Sie vielleicht erfahren, wie Sie ein festes Hintergrundbild oder Wasserzeichen auf einer Webseite erstellen. Dies ist eine gängige Designbehandlung, die seit geraumer Zeit online beliebt ist. Es ist ein praktischer Effekt, den Sie in Ihrer Webdesign-Trickkiste haben sollten.
Wenn Sie dies noch nicht getan haben oder es zuvor ohne Glück versucht haben, mag der Prozess einschüchternd wirken, ist aber eigentlich nicht sehr schwierig. Mit diesem kurzen Tutorial erhalten Sie die Informationen, die Sie benötigen, um die Technik mithilfe von CSS in wenigen Minuten zu erlernen.
Einstieg
Hintergrundbilder oder Wasserzeichen (die eigentlich nur sehr helle Hintergrundbilder sind) haben eine Geschichte im gedruckten Design. Dokumente sind seit langem mit Wasserzeichen versehen, um zu verhindern, dass sie kopiert werden. Darüber hinaus verwenden viele Flyer und Broschüren große Hintergrundbilder als Teil der Gestaltung des gedruckten Artikels. Webdesign hat seit langem Stile aus dem Druck übernommen und Hintergrundbilder sind einer dieser geliehenen Stile.
Diese großen Hintergrundbilder lassen sich ganz einfach mit den folgenden drei erstellen CSS-Stil Eigenschaften:
- Hintergrundbild
- Hintergrund Wiederholung
- Hintergrund-Anhang
- Hintergrundgröße
Hintergrundbild
Sie verwenden background-image, um das Bild zu definieren, das als Ihr Wasserzeichen verwendet wird. Dieser Stil verwendet einfach einen Dateipfad, um ein Bild zu laden, das Sie auf Ihrer Site haben, wahrscheinlich in einem Verzeichnis namens Bilder.
Hintergrundbild: url(/images/page-background.jpg);
Es ist wichtig, dass das Bild selbst heller oder transparenter ist als ein normales Bild. Dadurch wird das "Wasserzeichen" Look, bei dem ein halbtransparentes Bild hinter dem Text, den Grafiken und anderen Hauptelementen der Webseite liegt. Ohne diesen Schritt konkurriert das Hintergrundbild mit den Informationen auf Ihrer Seite und erschwert die Lesbarkeit.
Sie können das Hintergrundbild in jedem Bearbeitungsprogramm anpassen, z Adobe Photoshop.
Hintergrund Wiederholung
Als nächstes kommt die Eigenschaft background-repeat. Wenn Ihr Bild eine große Grafik im Wasserzeichenstil sein soll, verwenden Sie diese Eigenschaft, damit dieses Bild nur einmal angezeigt wird.
Hintergrundwiederholung: keine Wiederholung;
Ohne das keine Wiederholung -Eigenschaft ist die Standardeinstellung, dass das Bild auf der Seite immer wieder wiederholt wird. Dies ist in den meisten modernen Webseitendesigns unerwünscht, daher sollte dieser Stil in Ihrem CSS als wesentlich angesehen werden.
Hintergrund-Anhang
Background-Attachment ist eine Eigenschaft, die viele Webdesigner vergessen. Wenn Sie es verwenden, bleibt Ihr Hintergrundbild an Ort und Stelle, wenn Sie das verwenden Fest Eigentum. Es ist es, was dieses Bild in ein Wasserzeichen verwandelt, das auf der Seite fixiert ist.
Der Standardwert für diese Eigenschaft ist scrollen. Wenn Sie keinen Wert für den Hintergrundanhang angeben, wird der Hintergrund mit dem Rest der Seite gescrollt.
Hintergrundanhang: behoben;
Hintergrund-Größe
Background-size ist eine neuere CSS-Eigenschaft. Sie können die Größe eines Hintergrunds basierend auf dem Ansichtsfenster festlegen, in dem er angezeigt wird. Das ist sehr hilfreich für Responsive Websites die in verschiedenen Größen angezeigt werden auf verschiedenen Geräten.
Hintergrundgröße: Cover;
Zwei hilfreiche Werte, die Sie für diese Eigenschaft verwenden können, sind:
- Startseite – Skaliert den Hintergrund, sodass entweder die volle Breite oder die volle Höhe angezeigt wird. Dies bedeutet, dass einige Teile des Bildes möglicherweise nicht auf dem Bildschirm erscheinen, sondern dass der gesamte Bereich abgedeckt wird.
- Enthalten – Skaliert das Bild so, dass sowohl die gesamte Breite als auch die gesamte Höhe im zu formatierenden Bereich angezeigt werden. Das Bild wird nicht abgeschnitten, aber der Nachteil ist, dass Teile des Bereichs möglicherweise nicht vom Bild verdeckt werden.
CSS zu deiner Seite hinzufügen
Nachdem Sie die oben genannten Eigenschaften und ihre Werte verstanden haben, können Sie diese Stile zu Ihrer Website hinzufügen.
Fügen Sie dem HEAD Ihrer Webseite Folgendes hinzu, wenn Sie eine einseitige Site erstellen. Fügen Sie es den CSS-Stilen eines externen Stylesheets hinzu, wenn Sie eine mehrseitige Site erstellen und die Leistungsfähigkeit eines externen Sheets nutzen möchten.
Ändern Sie die URL Ihres Hintergrundbilds so, dass sie dem spezifischen Dateinamen und Dateipfad entspricht, der für Ihre Site relevant ist. Nehmen Sie alle anderen geeigneten Änderungen vor, die auch zu Ihrem Design passen, und Sie erhalten ein Wasserzeichen.
Sie können auch die Position angeben
Wenn Sie das Wasserzeichen an einer bestimmten Stelle auf Ihrer Webseite platzieren möchten, können Sie dies ebenfalls tun. Zum Beispiel möchten Sie das Wasserzeichen möglicherweise in der Mitte der Seite oder vielleicht in der unteren Ecke, im Gegensatz zur oberen Ecke, was die Standardeinstellung ist.
Fügen Sie dazu die Eigenschaft background-position zu Ihrem Stil hinzu. Dadurch wird das Bild genau an der Stelle platziert, an der es angezeigt werden soll. Sie können Pixelwerte, Prozentsätze oder Ausrichtungen verwenden, um diesen Positionierungseffekt zu erzielen.
Hintergrundposition: Mitte;