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.
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
HTML kód
<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)Eredmény
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
HTML kód
<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)Eredmény
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.
