Použití CSS k nastavení obrázku na pozadí

• Duben 20, 2024

Přemýšlíte někdy nad tím, jak webové stránky spravují tyto hezké návrhy a obrázky plovoucí za textem? Všechno se to děje prostřednictvím magie kaskádových stylů. CSS nejen umožňuje určit obrázek na pozadí vaší stránky, ale také vám umožní vyladit způsob, jakým se obrázek zobrazuje - takže můžete získat přesně požadovaný vzhled.

Základním stavebním kamenem pro váš obrázek na pozadí je dostatečně dobře vlastnost 'obrázek na pozadí'. Tuto vlastnost použijete k tomu, abyste svému webu řekli, kde se nachází obrazový soubor, a to následujícím způsobem:

tělo {
background-image: url ("image.gif");
}

To je vše, co musíte udělat, abyste umístili obrázek na pozadí své webové stránky. Samozřejmě budete pravděpodobně chtít přizpůsobit vzhled obrázku. Řekněme, že chcete, aby se váš obrázek začal v horní části stránky, ale aby byl vodorovně vystředěn namísto zarovnání doleva (výchozí zarovnání). V takovém případě budete chtít přidat do pravidla CSS vlastnost 'background-position':

tělo {
background-image: url ("image.gif");
Pozice na pozadí: středová část;
}

Při definování vlastnosti „poloha na pozadí“ nastaví první hodnota vodorovné zarovnání (vlevo, střed nebo vpravo) a druhá nastaví vertikální zarovnání obrazu (nahoře, uprostřed nebo dole).

Dále se rozhodnete, že chcete zastavit vodorovné obložení obrazu (opakující se), i když si přejete, aby se dlaždice svisle. Je čas vynést vlastnost „opakování pozadí“:

tělo {
background-image: url ("image.gif");
Pozice na pozadí: středová část;
pozadí-opakování: opakování-y;
}

Nastavení hodnoty na „opakovat-y“ říká prohlížeči, aby vedle sebe na pozadí osy y umístil svislý obraz, ale ne na osu x (vodorovně), což je přesně to, co jsme chtěli. Pokud byste to chtěli vodorovně, ale ne svisle, použijte místo toho hodnotu 'opakovat-x'; pokud si nepřejete, aby se obrázek vůbec dlaždicil, přiřaďte mu hodnotu „neopakovat“. Výchozí hodnota je dlaždice obrazu vodorovně i svisle, takže pokud je to nejlepší volba pro váš obrázek, nemusíte vůbec nastavovat vlastnost „opakování pozadí“.

Nakonec se můžete podívat na vlastnost 'připojení na pozadí'. Ve výchozím nastavení se obrázek bude posouvat při posouvání stránky, takže pokud obrázek neopakujete svisle a máte dlouhou stránku, jeho obrázek se neroztahuje na konec stránky. To můžete změnit nastavením vlastnosti „background-attach“ na „fixed“, což způsobí, že obrázek na pozadí zůstane na stejném místě na monitoru bez ohledu na to, jak se stránka posouvá. Nyní budou vaše pravidla pro obrázek na pozadí vypadat takto:

tělo {
background-image: url ("image.gif");
Pozice na pozadí: středová část;
pozadí-opakování: opakování-y;
připojení na pozadí: pevné;
}


Pokud chcete zachovat pravidla CSS co nejmenší, můžete zkombinovat všechny své hodnoty pozadí do jednoho řádku pomocí vlastnosti 'background', jako je tato:

Pozadí {
url ("image.gif") opakovaný pevný horní vrchol;
}

Při použití vlastnosti 'background' musíte uvést hodnoty v určitém pořadí:
[barva pozadí (pokud je použita)] [obrázek na pozadí] [opakování pozadí] [příloha na pozadí] [pozice na pozadí]. Můžete vynechat jakoukoli hodnotu, kterou nepotřebujete, stačí pouze uvést všechny hodnoty, které používáte ve správném pořadí, jinak pravidlo nebude fungovat.

Video Návody: Tvorba webu - CSS - jak nastavit obrázek na pozadí a jeho varianty - tutoriál č.3 (Duben 2024).