Háttérszínek, háttérképek

Háttérszín

A background-color segítségével színt adhatunk elemeink hátterének. Átlátszó szín esetén az elem mögött lévő elemek is (részlegesen) látszódni fognak. A háttérszín az elem teljes hátterét kitölti, látható a belső margó (padding), és a keret átlátszó része alatt (border). Alapértéke a transparent, vagyis átlátszó.

div {
	background-color: purple;
}

ul li {
	background-color: rgba(14%, 75%, 10%, 0.75);
}

Háttérkép

A background-image értékeként egy kép elérési útvonalát adhatjuk meg, url('elérési útvonal') formában. A kép valós méretében jelenik meg az elem hátterében. Alapértéke a none, vagyis nincs.

div {
    background-image: url('images/background.png');
}

ul li {
    backgroud-mage: url('http://mydomain.hu/picture.jpg');
}

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

A background-repeat segítségével szabályozhatjuk a háttérkép ismétlődését.

Értékei:

• no-repeat - nincs ismétlődés

• repeat - ismétlődés (ez az alapérték)

• repeat-x - ismétlődés csak vízszintesen

• repeat-y - ismétlődés csak függőlegesen

div {
    background-repeat: repeat;
}

ul li {
    backgroud-repeat: no-repeat;
}

Háttérkép helyzete

A background-position a kép helyzetét határozza meg vízszintesen, és függőlegesen.

Megadhatjuk kulcsszavakkal, ezek:

• center - középen

• top - fent

• bottom - lent

• left - balra

• right - jobbra

div {
	background-position: center;
}

span {
	backgroud-position: left;
}

Két értéket is megadhatunk első a vízszintes, második a függőleges helyzetet adja meg.

div {
	background-position: left top;
}

span {
	backgroud-position: right bottom;
}

Hosszértéket, vagy százalékot is felvehet, ebben az esetben a bal felső sarok lesz az origó (innen eltolva jelenik meg a kép).

div {
	background-position: 50% 50%;
}

span {
	backgroud-position: 10px 15px;
}

Háttérkép méretezése

A background-size határozza meg, hogy az elem hátterének mekkora hányadát fedje a háttérkép. Alapértéke az auto vagyis a kép eredeti méretében jelenik meg.

Megadhatjuk hosszmértékben a méretet, például pixelben, vagy százalékban, ami az elem méretéhez képest értendő.

Kulcsszavas értékei:

• auto - eredeti méret (alapérték)

• cover - a háttérkép teljesen lefedi az elemet

• contain - a kép addig növekszik, amíg vízszintesen, vagy függőlegesen be nem tölti az elemet.

div {
	background-size: cover;
}

ul li {
	backgroud-size: auto contain;
}

Gyorsírásos háttér

A background gyorsírásos forma, amivel egy menetben több háttér jellemzőt is megadhatunk.

div {
	background: #c5c6c7 center no-repeat cover url('img/background.png');
}

ul li {
	backgroud: none;
}

Többszörös háttérkép

Egy HTML elemnek meg lehet adni több háttérképet is, ehhez vesszővel (nem pontosvesszővel) elválasztva kell a háttérképeket felsorolni:

div {
    background-image: url('firs-image.jpg'), url('second-image.png');
}

A background-image tulajdonsághoz hasonlóan a további háttér beállításokat is megadhatjuk képenként, szintén vesszővel elválasztva:

div {
    background-image: url('firs-image.jpg'), url('second-image.png');
    background-position: left top, right bottom;
    backgroud-repeat: no-repeat, no-repeat;
}

Hasonlóképpen működik a background gyorsírásos CSS tulajdonság:

div {
    background: 
        url('images/firs-image.jpg') left top no-repeat, 
        url('images/second-image.png') center repeat-x,
        url('images/third-image.png') right bottom no-repeat;
}

A fenti példában háttérképenként új sorba van törve a kód, ez nagyban könnyíti az olvashatóságot.

Ha több háttérképet állítunk be egy HTML elemnek, előfordulhat, hogy kitakarják egymást, mindíg a sorrendben korábban megadott kép fog rálapolódni a később megadott képre (az elsőnek megadott kép lesz legfölül, az utolsónak megadott kép legalul).