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

A CSS background-image segítségével egy képet állíthatunk be háttérnek a weboldalunkon. Ez a CSS háttérkép bárhol megjeleníthető a weboldalon.

0
CSS alapok (A CSS alapjainak összefoglalója) című cikk nyitóképe

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

Korábban átvettük a szövegszín és a háttérszín beállítását, most épp itt az ideje rátérni egy hasonlóan fontos CSS beállításra, ami nem más, mint a háttérkép beállítása. A CSS szerencsére erre is ad eszközt a kezünkbe a background-image segítségével. A használata egy nagyon picit nehezebb, mint az előző két témáé, de azért ez is könnyen megtanulható, szóval nem kell kétségbeesni.

A CSS background-image segítségével egy képet állíthatunk be háttérnek a weboldalunkon. Alapértelmezetten ez a háttérkép ismétlődően jelenik meg. Magyarul ha túl kicsi a kép, akkor a kieső részeket magától feltölti a kép ismétlődésével.

Tartalomjegyzék

Háttérkép beállításának szintaktikája

ELEM {
   background-image: url("ELÉRÉSI.ÚTVONAL");
}
Code language: CSS (css)

Fontos megjegyezni, hogy nem csak a BODY-nak állíthatunk be hátteret, hanem rengeteg más elemnek is. Például: p, div, table. A background-image: url(” „); részt hagyjuk érintetlenül, egyedül a két idézőjel közé tegyük be a kép elérési útvonalát.

Háttérkép elérési útvonalának megadása

Az elérési útvonalat többféleképpen is megadhatjuk, például:

  • megadhatjuk a teljes elérési útvonalat (például: WEBSERVER/MAPPA/KÉP.JPG)
  • megadhatjuk a relatív elérési útvonalat (ha a fájl és a kép ugyanabba a mappába van, akkor elég csak ennyit megadnunk: KÉP.JPG)
  • megadhatunk internetes URL címet is (például: webiskola.hu/kep.jpg)

Példa háttérkép beállítására

HTML + CSS kód

<!DOCTYPE html>
  <HTML>
    <HEAD>
       <STYLE>
          body {
               background-image: url('https://webiskola.hu/kiskep.jpg');
            }
       </STYLE>
    </HEAD>
    <BODY>
    </BODY>
  </HTML>
Code language: HTML, XML (xml)

Eredmény





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

Háttérkép ismétlődésének megszüntetése

Ha szeretnénk a kép ismétlődését megszüntetni, akkor a CSS kódot csak ennyivel kell kiegészítenünk.

Szintaktika

background-repeat: no-repeat;
Code language: HTTP (http)

Példa

HTML + CSS kód

<!DOCTYPE html>
  <HTML>
    <HEAD>
       <STYLE>
          body {
               background-image: url('https://webiskola.hu/kiskep.jpg');
background-repeat: no-repeat;
            }
       </STYLE>
    </HEAD>
    <BODY>
    </BODY>
  </HTML>
Code language: HTML, XML (xml)

Eredmény





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

Háttérkép nyújtása CSS-ben

A CSS segítségével lehetőségünk van akár a kép nyújtására is. Bár ez nem nagyon ajánlott, mert ha egy rossz minőségű képet megnyújtunk, akkor a kép minősége még rosszabb lesz.

Szintaktika

background-size:100% 100%;

Code language: CSS (css)

A példában meghatároztuk, hogy a háttérkép hossza és magassága 100% legyen. Azaz vegye fel a számára felvehető maximális méretet.

Példa

HTML + CSS kód

<!DOCTYPE html>
  <HTML>
    <HEAD>
       <STYLE>
          body {
               background-image: url('https://webiskola.hu/kiskep.jpg');
background-size:100% 100%;            }
       </STYLE>
    </HEAD>
    <BODY>
    </BODY>
  </HTML>
Code language: HTML, XML (xml)

Eredmény





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

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

További leckék