HTML pozadí lze vytvořit pomocí barevných hodnot nebo obrazového souboru. Výběr správného pozadí může vylepšit design vaší webové stránky a zároveň zajistit, že váš obsah zůstane jasný a snadno čitelný.

Co jsou HTML pozadí?

Oblast za obsahem webové stránky se označuje jako HTML pozadí. Tato pozadí lze nastavit při vytváření stránky v HTML. Lze je také podle potřeby později upravit. Výchozí nastavení HTML pozadí je bílé. Změna tohoto nastavení se doporučuje nejen jako způsob, jak vylepšit design webové stránky, ale také jako způsob, jak zlepšit viditelnost obsahu.

Jak lze změnit pozadí HTML?

Existují dva hlavní způsoby, jak navrhnout HTML pozadí:

  • použitím barevné hodnoty
  • pomocí obrázku nebo přechodu

Tyto hodnoty se nastavují pomocí atributu HTML style. V následujících částech vás provedeme oběma metodami.

Definování pozadí HTML podle hodnoty barvy

Chcete-li změnit barvu pozadí HTML, použijte atribut style a vlastnost background-color nebo bgcolor. Existují tři různé možnosti pro zadání hodnoty barvy:

  • Název barvy: Máte možnost nastavit požadovanou barvu pouhým zadáním jejího názvu. Kromě standardních barev, jako red, yellow nebo green, jsou možné i speciální barvy, jako jsou lightblue nebo deepskyblue. Při zadávání barvy nezáleží na velkých a malých písmenech.
  • Hexadecimální kód barvy: Barvy můžete také specifikovat pomocí jejich šestimístného hexadecimálního čísla. To se skládá ze tří párů tvořených číslicemi 0 až 9 a písmeny a až f. První pár představuje hodnotu červené, druhý zelené a třetí modré, přičemž 00 je nejnižší hodnota a ff nejvyšší. Například modrá by byla 0000ff.
  • Hodnota RGB: Alternativně můžete použít hodnotu RGB, která je také základem hexadecimálního barevného kódu. Hodnoty se pohybují od 0 do 255 a odpovídají barvám červená, zelená a modrá. Například modrá barva by byla RGB (0, 0, 255).

Syntaxe, kterou použijete k definování požadované barvy pro pozadí HTML, vypadá takto:

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

V následujícím příkladu používáme hexadecimální kód barvy k určení světle modré barvy jako barvy pozadí:

<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 vypadá:

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

V případě potřeby můžete také definovat barvy pro HTML pozadí samostatně pro jednotlivé části vašich webových stránek. To se provádí pomocí atributu style a vlastnosti background-color. Jak to funguje, si můžete prohlédnout v následujícím příkladu, kde byly nastaveny různé barvy pro celkové pozadí, stejně jako pro pozadí <h2> nadpisů a <p> textových částí:

<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ázek: Example: Three different coloured HTML backgrounds
Example of an HTML background with three different colours.

Nastavení obrázků jako HTML pozadí

Aby bylo možné použít obrázky nebo grafiku jako pozadí HTML, musí být uloženy ve formátech JPG, PNG, SVG, WebP nebo GIF. Následující příklad ukazuje příslušný kód pro integraci obrázku jako pozadí. Cesta k obrázku musí být upravena individuálně:

<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

Při použití obrázku byste měli vždy dbát na čitelnost obsahu. Zadáním dalších parametrů můžete upravit umístění obrázku nebo grafiky tak, aby byl text dobře rozeznatelný od pozadí.

Přejít do hlavního menu