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');">

Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

Eredmény

Ide pedig jöhet a tartalom.









>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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>
Code language: HTML, XML (xml)

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;
Code language: HTTP (http)

Szintaktika

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

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>
Code language: HTML, XML (xml)


















>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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%;
Code language: JavaScript (javascript)

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>
Code language: HTML, XML (xml)











>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!