A HTML háttér színekkel vagy képfájlokkal hozható létre. A megfelelő háttér kiválasztása javíthatja webhelyének megjelenését, miközben biztosítja, hogy tartalma továbbra is világos és könnyen olvasható maradjon.

Mik azok a HTML háttérképek?

A weboldal tartalma mögötti területet HTML háttérnek nevezzük. Ezeket a háttérképeket HTML-ben lehet beállítani az oldal létrehozásakor. Szükség szerint később is módosíthatók. Alapértelmezés szerint a HTML háttér fehér. Ennek megváltoztatása nemcsak a weboldal dizájnjának javítása érdekében ajánlott, hanem a tartalom láthatóságának javítása érdekében is.

Hogyan lehet megváltoztatni egy HTML háttérszínt?

A HTML háttértervezésnek két fő módja van:

  • színes érték alkalmazásával
  • kép vagy színátmenet használatával

Ezeket az értékeket a HTML attribútummal lehet beállítani style. A következő szakaszokban bemutatjuk mindkét módszert.

HTML háttér színének meghatározása színérték alapján

A HTML háttér színének megváltoztatásához használja az style attribútumot és a background-color vagy bgcolor tulajdonságot. A színérték megadására három különböző lehetőség áll rendelkezésre:

  • Színnév: Lehetőség van a kívánt szín beállítására egyszerűen a neve megadásával. A standard színek, mint például red, yellow vagy green mellett speciális színek, mint például lightblue vagy deepskyblue is lehetségesek. A szín megadásakor a kis- és nagybetűk nem számítanak.
  • Hexadecimális színkód: A színeket hatjegyű hexadecimális számmal is megadhatja. Ez három párból áll, amelyek a 0 9 számokból és a a f betűkből állnak. Az első pár a vörös értéket, a második a zöldet, a harmadik pedig a kéket jelenti, ahol 00 a legalacsonyabb érték, ff pedig a legmagasabb. Például a kék szín értéke 0000ff.
  • RGB-érték: Alternatívaként használhatja az RGB-értéket is, amely a hexadecimális színkód alapja is. Az értékek 0 255 terjednek, és a piros, zöld és kék színeknek felelnek meg. Például a kék RGB (0, 0, 255) lenne.

A HTML háttér színének meghatározásához használt szintaxis a következő:

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

A következő példában hexadecimális színkódot használunk a világoskék háttérszín megadásához:

<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

Így néz ki:

Kép: HMTL background: Colour example
Sample HTML background with the hex code ‘#BFEFFF’.

Szükség esetén a weboldalak egyes szakaszaihoz külön-külön is meghatározhat színeket a HTML-háttérhez. Ehhez a style attribútumot és a background-color tulajdonságot kell használni. Az alábbi példában láthatja, hogyan működik ez: a teljes háttérhez, valamint a <h2> címsorok és a <p> szövegszakaszok háttéréhez különböző színeket állítottak be:

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

Képek beállítása HTML háttérként

Ahhoz, hogy képeket vagy grafikákat HTML-háttérként használhassunk, azokat JPG, PNG, SVG, WebP vagy GIF képformátumban kell elmenteni. Az alábbi példa bemutatja a kép háttérként való integrálásához szükséges kódot. A kép elérési útját egyénileg kell beállítani:

<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

Kép használata esetén mindig figyelni kell a tartalom olvashatóságára. További paraméterek megadásával beállíthatja a kép vagy grafika elhelyezkedését, hogy a szöveg jól elkülönüljön a háttértől.

Ugrás a főmenübe