CSS

HTML

COMPONENTS

CODE HUB

CSS háttérkép generátor

Konfiguráció

Kép URL

Osztály

Előnézet

Kód

ReadyTools Academy

Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.

Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯

Kezdj bele

CSS háttérkép generátor

A CSS-ben a "background-image" tulajdonság segítségével beállíthatsz egy háttérképet a HTML-elemekhez. Ez a tulajdonság lehetővé teszi egy olyan képfájl megadását, amelyet egy elem háttereként kell használni.

Íme, hogyan használhatja a "background-iamge" tulajdonságot a CSS-ben:

.background-image-element { background-image: url('image.jpg'); }

ebben a példában:

  • A ".background-image-element" osztály beállítja az elem háttérképét.
  • "url('image.jpg') " megadja a háttérként használni kívánt kép URL-címét. Az "image.jpg" helyébe a képfájl tényleges elérési útvonalát írja be.

Más tulajdonságokat is megadhat a háttérkép viselkedésének szabályozására, mint például a "background-repeat", "background-size" és "background-position". Íme egy példa, amely beállítja, hogy a háttérkép az egész elemet befedje, mindkét irányban ismétlődjön, és középre pozícionálja:

.background-image-element { background-image: url('image.jpg'); background-repeat: repeat; background-size: cover; background-position: center; }

Ebben a példában:

  • background-repeat: repeat; megadja, hogy a kép vízszintesen és függőlegesen is ismétlődjön.
  • background-size: cover; a háttérkép torzítás nélkül lefedi az egész elemet.
  • background-position: center; a háttérképet az elemen belül központosítja.

A "background-image" tulajdonság sokoldalú, és vizuálisan vonzó és testreszabott hátterek létrehozására használható a weboldal különböző HTML-elemeinek.