Pozadia HTML možno vytvoriť pomocou farebných hodnôt alebo obrazového súboru. Výber správneho pozadia môže vylepšiť dizajn vašej webovej stránky a zároveň zabezpečiť, že obsah zostane prehľadný a ľahko čitateľný.

Čo sú HTML pozadia?

Oblasť za obsahom webovej stránky sa nazýva HTML pozadie. Tieto pozadia je možné nastaviť pri vytváraní stránky v HTML. V prípade potreby ich možno neskôr aj upraviť. Predvolené HTML pozadia sú biele. Zmena tohto nastavenia sa odporúča nielen ako spôsob vylepšenia dizajnu webovej stránky, ale aj ako spôsob zlepšenia viditeľnosti obsahu.

Ako je možné zmeniť pozadie HTML?

Existujú dva hlavné spôsoby, ako navrhnúť HTML pozadia:

  • použitím farebnej hodnoty
  • použitím obrázku alebo prechodu

Tieto hodnoty sa nastavujú prostredníctvom atribútu HTML style. V nasledujúcich častiach vás prevedieme oboma metódami.

Definovanie HTML pozadia podľa hodnoty farby

Na zmenu farby pozadia HTML použite atribút style a vlastnosť background-color alebo bgcolor. Na určenie hodnoty farby existujú tri rôzne možnosti:

  • Názov farby: Máte možnosť nastaviť požadovanú farbu jednoduchým použitím jej názvu. Okrem štandardných farieb, ako sú red, yellow alebo green, sú možné aj špeciálne farby, ako sú lightblue alebo deepskyblue. Pri špecifikovaní farby nezáleží na veľkých a malých písmenách.
  • Hexadecimálny kód farby: Farby môžete špecifikovať aj pomocou ich šesťmiestneho hexadecimálneho čísla. To sa skladá z troch párov tvorených číslicami 0 až 9 a písmenami a až f. Prvý pár predstavuje hodnotu červenej, druhý zelenú a tretí modrú, pričom 00 je najnižšia hodnota a ff najvyššia. Napríklad modrá by bola 0000ff.
  • Hodnota RGB: Alternatívne môžete použiť hodnotu RGB, ktorá je tiež základom pre hexadecimálny farebný kód. Hodnoty sa pohybujú od 0 do 255 a zodpovedajú farbám červená, zelená a modrá. Napríklad modrá by bola RGB (0, 0, 255).

Syntax, ktorú použijete na definovanie požadovanej farby pre vaše HTML pozadia, vyzerá takto:

<body style="background-color: value;">
html

V nasledujúcom príklade používame hexadecimálny farebný kód na určenie svetlo modrej farby ako farby pozadia:

<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Takto to vyzerá:

Obrázok: HMTL background: Colour example
Sample HTML background with the hex code ‘#BFEFFF’.

V prípade potreby môžete farby pozadia HTML definovať aj samostatne pre jednotlivé časti vašich webových stránok. To sa vykonáva pomocou atribútu style a vlastnosti background-color. Ako to funguje, si môžete pozrieť v nasledujúcom príklade, kde boli nastavené rôzne farby pre celkové pozadie, ako aj pre pozadia <h2> nadpisov a <p> textových častí:

<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
</body>
</html>
html
Obrázok: Example: Three different coloured HTML backgrounds
Example of an HTML background with three different colours.

Nastavenie obrázkov ako HTML pozadia

Aby bolo možné používať obrázky alebo grafiku ako pozadia HTML, musia byť uložené vo formátoch JPG, PNG, SVG, WebP alebo GIF. Nasledujúci príklad ukazuje vhodný kód na integráciu obrázku ako pozadia. Cesta k obrázku musí byť upravená individuálne:

<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Pri používaní obrázku by ste mali vždy dbať na čitateľnosť obsahu. Zadávaním ďalších parametrov môžete upraviť umiestnenie obrázku alebo grafiky tak, aby bol text odlíšiteľný od pozadia.

Prejsť na hlavné menu