Moderní tvorba webových aplikací

O webu

Absolutně posicované pozadí

Jednoduché řešení vícebarevného pozadí absolutním posicováním.

2 minuty

Pokud by se pozadí nějakého elementu mělo skládat z různých barev, je nejjednodušší použít vícebarevný obrázek velkých rozměrů a nechat jej opakovat. Jak si poradit i bez obrázku pomocí CSS?

Řešení spočívá ve vytvoření absolutně posicovaných boxů pozadi (v obalu s position: relative) s rozměry 50 % na šířku a 100 % na výšku (funkční od Internet Exploreru 7). Jeden se umístí doleva (left: 0) a druhý doprava (right: 0).

z-index
Naprosto podstatné pro funkčnost je správné užití z-indexu, tj. schovat pozadí za text, ale ne za další element.
.obal {position: relative; z-index: 0}
.pozadi {position: absolute; z-index: -1}

Související články

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Možnosti stylování <iframe>

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

10 minut

Zvýraznění aktivní sekce při rolování

Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.

5 minut

CSS funkce random()

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025