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)

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Určuje polohu obrázku.

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í:

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.

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

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