Categories: Software

CSS: Hintergrund mit doppeltem Farbverlauf

Die Aufgabenstellung für einen Hintergrund mit doppelten Farbverlauf ist Folgende: Ein weißer Hintergrund soll am linken und rechten Seitenrand, wie in Abbildung A, langsam zu grau werden. Wenn man mit einem Layout mit fester Seitenbreite arbeitet, ist der gewünschte Farbverlaufseffekt recht einfach zu erzielen: Hier braucht man nur ein Hintergrundbild mit der entsprechenden Breite, welches die Farbverläufe an den Rändern aufweist. Und dann muss man nur noch eine Style-Anweisung erstellen, welche dieses Hintergrundbild auf den body-Tag anwendet und vertikal wiederholt – das ist alles.

Die Herausforderung bei diesem Projekt besteht darin, dass das Layout flexibel ist. Das bedeutet: Der Hintergrund verändert sich zusammen mit dem Browserfenster in der Größe. Ein einzelnes Hintergrundbild würde diese Größenänderung nicht mitmachen, daher müssen separate Bilder für den linken und rechten Farbverlauf verwendet werden. Da jedes Seitenelement nur ein Hintergrundbild haben kann, bedarf es einiger Tricks, um einen Hintergrund zu erstellen, der zwei Hintergrundbilder enthält, das gesamte Browserfenster unabhängig vom Inhalt ausfüllt und auch noch in allen wichtigen aktuellen Browsern funktioniert.

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

Microsoft nennt weitere Details zu kostenpflichtigen Patches für Windows 10

Erstmals liegen Preise für Verbraucher vor. Sie zahlen weniger als Geschäftskunden. Dafür beschränkt Microsoft den…

2 Stunden ago

Microsoft verschiebt erneut Copilot Recall

Die Entwickler arbeiten noch an weiteren „Verfeinerungen“. Windows Insider erhalten nun wohl eine erste Vorschau…

20 Stunden ago

GenKI im Job: Mitarbeitende schaffen Tatsachen

Laut Bitkom-Umfrage werden in jedem dritten Unternehmen in Deutschland private KI-Zugänge genutzt. Tendenz steigend.

22 Stunden ago

97 Prozent der Großunternehmen melden Cyber-Vorfälle

2023 erlitten neun von zehn Unternehmen in der DACH-Region Umsatzverluste und Kurseinbrüche in Folge von…

22 Stunden ago

„Pacific Rim“-Report: riesiges, gegnerisches Angriffs-Ökosystem

Der Report „Pacific Rim“ von Sophos beschreibt Katz-und-Maus-Spiel aus Angriffs- und Verteidigungsoperationen mit staatlich unterstützten…

1 Tag ago

DeepL setzt erstmals auf NVIDIA DGX SuperPOD mit DGX GB200-Systemen

NVIDIA DGX SuperPOD soll voraussichtlich Mitte 2025 in Betrieb genommen und für Forschungsberechnungen genutzt werden.

1 Tag ago