HTML háttérkép beállítása (HTML background-image)

Tanulj meg minden információt a háttérkép beállításáról a HTML nyelvben.

HTML háttérkép beállítása (HTML background-image)

Szinte minden HTML elemnek állíthatunk be háttérképet. De a leggyakrabban ezeknek szoktunk:

  • BODY
  • div

Háttérkép beállítása egy HTML elem számára

Ahhoz, hogy egy háttérképet adjunk egy HTML elemhez, a “style” tulajdonságot kell használnunk. Amelyet megadhatunk soron belül, illetve külső CSS fájlon keresztül is.

Szintaktika

<div style="background-image: url('KÉP.ELÉRÉSI.HELYE');">

Mással is működik, nemcsak div-vel. A szintaktika csak így nézhet ki, az url után zárójelek és aposztrófok közé helyezzük el a kép elérési útvonalát.

Példa

HTML kód

<div style="background-image:url('https://webiskola.hu/kep.jpg');"><p>Ide pedig jöhet a tartalom.</p></div>

Eredmény

Ide pedig jöhet a tartalom.









Háttérkép beállítása a teljes weboldal számára

Ha szeretnénk az egész weboldalnak egy háttérképet beállítani, akkor azt így tegyük meg:

<DOCTYPE !html>
<html>

<head>
</head>

<body style="background-image:url('KÉP.HELYE');">
</body>

</html>

Háttérkép ismétlése

Ha a háttérkép túl kicsi, akkor a böngésző automatikusan beállítja, hogy a kép kitöltse az egész képernyőt, a kép ismételgetésével. Ha nekünk ez megfelel, akkor nincs teendőnk. Viszont, ha szeretnénk megtiltani az ismétlődést, akkor a kódot ki kell egészítenünk az alábbival:

background-repeat: no-repeat;

Szintaktika

background-image:url('KÉP.HELYE');
background-repeat: no-repeat;

Példa

<div style="background-image:url('https://webiskola.hu/kiskep.jpg');"></div>

<div style="background-image:url('https://webiskola.hu/kiskep.jpg'); background-repeat: no-repeat;
"></div>



















Felül láthatjátok, hogy mi történik, ha alapértelmezetten hagyjuk a képismétlést. A böngésző automatikusan feltölti a rendelkezésére álló helyet a kép ismételgetésével.

Alatta viszont az látható, hogy mi történik, ha megtiltjuk a böngésző számára, hogy megismételje a képet.

Háttérkép nyújtása

Ha a fentebb vázolt két megoldásból egyik sem tetszik, akkor lehetőségünk van a kép megnyújtására.

Szintaktika

background-image:url('KÉP.HELYE');
background-size:100% 100%;

A kódunkat a “background-size:100% 100%;” résszel egészítettük ki, ahol meghatározzuk, hogy a háttérkép mérete, pontosabban a hossza és magassága 100% legyen. Azaz vegye fel a számára felvehető maximális méretet.

Példa

<div style="background-image:url('https://webiskola.hu/kiskep.jpg');"></div>


<div style="background-image:url('https://webiskola.hu/kiskep.jpg'); background-size:100% 100%;"></div>











Az első példán láthatod, hogy mekkora valójában a kép mérete. A második példa az első kép kis méretéből kifolyólag ilyen pixeles. Így szemléltethető kellőképpen, hogy valóban felnagyít, szétnyújt bármekkora méretű képet.