HTML ozadja lahko ustvarite z barvnimi vre­dnost­mi ali slikovno datoteko. Izbiranje pravega ozadja lahko izboljša videz vaše spletne strani, hkrati pa zagotovi, da vaša vsebina ostane jasna in lahko berljiva.

Kaj so HTML ozadja?

Območje za vsebino spletne strani se imenuje HTML ozadje. Ta ozadja se lahko nastavijo pri ustvar­ja­nju strani v HTML. Po potrebi jih je mogoče tudi naknadno spre­me­ni­ti. Privzeto so HTML ozadja bela. Sprememba tega ni pri­po­ro­člji­va le kot način za iz­bolj­ša­nje videza spletne strani, ampak tudi za iz­bolj­ša­nje vidnosti vsebine.

Kako lahko spremenim ozadje HTML?

Obstajata dva glavna načina za obli­ko­va­nje HTML ozadij:

  • z uporabo barvne vrednosti
  • z uporabo slike ali prehoda

Te vrednosti se nastavijo prek atributa HTML style. V na­sle­dnjih poglavjih bomo pred­sta­vi­li obe metodi.

Opre­de­lje­va­nje ozadij HTML po barvni vrednosti

Če želite spre­me­ni­ti barvo ozadja HTML, uporabite atribut style in lastnost background-color ali bgcolor. Obstajajo tri različne možnosti za določitev vrednosti barve:

  • Ime barve: Želeno barvo lahko nastavite preprosto z njenim imenom. Poleg stan­dar­dnih barv, kot so red, yellow ali green, so možne tudi posebne barve, kot sta lightblue ali deepskyblue. Pri določanju barve ni pomembna velika ali mala črka.
  • Šest­naj­sti­ški barvni kod: Barve lahko določite tudi s šest­me­stno šest­naj­sti­ško številko. Ta je se­sta­vlje­na iz treh parov, ki jih tvorijo številke 0 do 9 in črke a do f. Prvi par pred­sta­vlja vrednost rdeče, drugi zeleno, tretji pa modro, pri čemer je 00 najnižja vrednost, ff pa najvišja. Modra barva bi bila na primer 0000ff.
  • RGB vrednost: Al­ter­na­tiv­no lahko uporabite RGB vrednost, ki je tudi osnova za šest­naj­sti­ško barvno kodo. Vrednosti segajo od 0 do 255 in ustrezajo barvam rdeča, zelena in modra. Na primer, modra bi bila RGB (0, 0, 255).

Sintaksa, ki jo upo­ra­blja­te za opre­de­li­tev želene barve za HTML ozadja, je naslednja:

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

V na­sle­dnjem primeru uporabimo šest­naj­sti­ški barvni kod, da določimo svetlo modro kot barvo ozadja:

<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

Tako izgleda:

Image: HMTL background: Colour example
Sample HTML backgro­und with the hex code ‘#BFEFFF’.

Po potrebi lahko barve za HTML ozadja določite tudi ločeno za posamezne dele svojih spletnih strani. To storite z atributom style in la­stno­stjo background-color. Kako to deluje, si lahko ogledate v na­sle­dnjem primeru, kjer so bile določene različne barve za celotno ozadje, pa tudi za ozadja <h2> naslovov in <p> odstavkov besedila:

<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
Image: Example: Three different coloured HTML backgrounds
Example of an HTML backgro­und with three different colours.

Na­sta­vi­tev slik kot ozadja HTML

Da bi lahko slike ali grafike uporabili kot ozadja HTML, morajo biti shranjene v slikovnih formatih JPG, PNG, SVG, WebP ali GIF. Naslednji primer prikazuje ustrezen kod za vklju­či­tev slike kot ozadja. Pot do slike je treba pri­la­go­di­ti in­di­vi­du­al­no:

<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 uporabi slike morate vedno upo­šte­va­ti ber­lji­vost vsebine. Z do­lo­či­tvi­jo dodatnih pa­ra­me­trov lahko pri­la­go­di­te položaj slike ali grafike, da se besedilo loči od ozadja.

Go to Main Menu