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

Taugen Kryptowährungen als Unterstützer der Energiewende?

Bankhaus Metzler und Telekom-Tochter MMS testen, inwieweit Bitcoin-Miner das deutsche Stromnetz stabilisieren könnten.

5 Stunden ago

Supercomputer-Ranking: El Capitan überholt Frontier und Aurora

Mit 1,7 Exaflops ist El Capitan nun der dritte Exascale-Supercomputer weltweit. Deutschland stellt erneut den…

9 Stunden ago

Ionos führt neue AMD-Prozessoren ein

Der deutsche Hyperscaler erweitert sein Server-Portfolio um vier Angebote mit den neuen AMD EPYC 4004…

10 Stunden ago

Lags beim Online-Gaming? DSL-Vergleich und andere Tipps schaffen Abhilfe

Beim Online-Gaming kommt es nicht nur auf das eigene Können an. Auch die technischen Voraussetzungen…

10 Stunden ago

GenKI-Fortbildung immer noch Mangelware

Fast jedes zweite Unternehmen bietet keinerlei Schulungen an. In den übrigen Betrieben profitieren oft nur…

11 Stunden ago

Netzwerk-Portfolio für das KI-Zeitalter

Huawei stellt auf der Connect Europe 2024 in Paris mit Xinghe Intelligent Network eine erweiterte…

13 Stunden ago