IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Backgrounds (pozadí) - Český CSS3 manuál

Pro pozadí nám CSS3 přináší několik nových vlastností.

CSS3 Velikost obrázku na pozadí (background-size)

Pozadí - CSS vlastnosti

Příkladné použití převzorkování obrázku na velikost použitého divu.

div
{
    background:url(muj_obrazek.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

CSS3 background-origin

Určuje polohu obrázku.

Pozadí - CSS vlastnosti

Příkladné použití na divu. Umístění obrázku do polohy obsahu.

div
{
    background: url(muj_obrazek.png);
    -webkit-background-origin: content-box;
    background-origin: content-box;
}

Zde jsou znázorněny polohy obrázku pro lepší pochopení:

Pozadí - CSS vlastnosti

CSS3 Více obrázků na pozadí

Pomocí CSS3 můžeme na pozadí vložit více obrázků najednou.

body
{
    background-image: url(muj_obrazek1.png), url(muj_obrazek2.png);
}

CSS3 Vlastnost background-clip

Pomocí této vlastnosti můžeme vybrat, kde se pozadí bude vykreslovat.

Pozadí - CSS vlastnosti

Příkladné použití pro div:

div
{
    background-color: skyblue;
    background-clip: content-box;
}

 

Všechny články v sekci
Pozadí - CSS vlastnosti
Článek pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Aktivity