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

CSS pseudo element ::marker

CSS pseudo element ::marker umožňuje stylovat odrážky seznamů

4 minuty

Zobrazení dlouhé URL

Jak zobrazit dlouhé URL v aplikaci, aby nerozbila layout.

6 minut

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

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