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

Toughbooks als Marktnische: Für wen sind die stabilen Laptops geeignet?

Technik funktioniert überall oder zumindest fast überall. In einem klimatisierten Büro mag ein herkömmlicher Laptop…

11 Stunden ago

iOS 18 macht einige iPads unbrauchbar

Betroffen ist derzeit offenbar nur das iPad Pro M4. Es lässt sich Berichten von Nutzern…

11 Stunden ago

Google AdSense: EuG hebt Geldstrafe der EU-Kommission auf

Die EU-Kommission kann die Entscheidung noch anfechten. Das Gericht der Europäischen Union kassiert lediglich die…

13 Stunden ago

Chrome 129 stopft schwerwiegende Sicherheitslöcher

Hacker können aus der Ferne Schadcode einschleusen und ausführen. Betroffen sind Chrome für Windows, macOS…

23 Stunden ago

Sicherheitslücken bei Verivox und Check24 geben Kundendaten preis

Das Datenleck betrifft den Kreditvergleich. Unbefugte haben zwischenzeitlich Zugriff auf die Kreditvergleiche anderer Kunden.

1 Tag ago

Copilot Wave 2: Microsoft kündigt neue KI-Funktionen an

Copilot wird stärker in Microsoft 365 integriert. Neue Funktionen stehen unter anderem für Excel, Outlook,…

2 Tagen ago