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

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

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