HTML obrázky na pozadí
Obrázek na pozadí lze zadat pro téměř jakýkoli prvek HTML.
Obrázek na pozadí prvku HTML
Chcete-li přidat obrázek na pozadí na prvek HTML, použijte styleatribut HTML a vlastnost CSS background-image:
Příklad
Přidejte obrázek na pozadí do prvku HTML:
<div style="background-image: url('img_girl.jpg');">
Můžete také určit obrázek pozadí v <style>
prvku v <head>
sekci:
Příklad
Určete obrázek pozadí v <style>
prvku:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Obrázek pozadí na stránce
Pokud chcete, aby celá stránka měla obrázek na pozadí, musíte určit obrázek pozadí na <body>prvku:
Příklad
Přidejte obrázek na pozadí pro celou stránku:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Opakování pozadí
Pokud je obrázek na pozadí menší než prvek, bude se obrázek opakovat vodorovně i svisle, dokud nedosáhne konce prvku:
Příklad
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Aby se obrázek na pozadí neopakoval, nastavte background-repeatvlastnost na no-repeat.
Příklad
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Pozadí Obálka
Pokud chcete, aby obrázek na pozadí pokrýval celý prvek, můžete nastavit background-sizevlastnost na
cover.
Abyste se ujistili, že je vždy pokryt celý prvek, nastavte
background-attachmentvlastnost nafixed:
Tímto způsobem obrázek na pozadí zakryje celý prvek bez roztahování (obrázek si zachová původní proporce):
Příklad
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Pozadí Stretch
Pokud chcete, aby se obrázek na pozadí roztáhl, aby se vešel na celý prvek, můžete nastavit background-sizevlastnost na
100% 100%:
Zkuste změnit velikost okna prohlížeče a uvidíte, že se obrázek roztáhne, ale vždy zakryje celý prvek.
Příklad
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Další informace CSS
Z výše uvedených příkladů jste se naučili, že obrázky na pozadí lze upravovat pomocí vlastností pozadí CSS.
Chcete-li se dozvědět více o vlastnostech pozadí CSS, prostudujte si náš výukový program na pozadí CSS .