# 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ó.

```css
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.

```css
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

```css
div {
    background-repeat: repeat;
}

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

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LXFjDtFpRRNGBEnvVF2%2F-LXFj_Q3moOUo-xjELTA%2Fbackground-repeat.png?alt=media\&token=190606f9-dea9-4b2e-a370-fa286662b781)

## 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

```css
div {
	background-position: center;
}

span {
	backgroud-position: left;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LWXc_w72zZbmWOtH28D%2F-LWXcdbeyY0JPrxqTGXk%2Fbgp-0.png?alt=media\&token=cd197543-a066-4524-8d4c-71cf4490777a)

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LWXc_w72zZbmWOtH28D%2F-LWXcgdkXy1Ku-UbIN4w%2Fbgp-1.png?alt=media\&token=878a25ed-73e9-4bf3-a0ea-b6a878aa8805)

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

```css
div {
	background-position: left top;
}

span {
	backgroud-position: right bottom;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LWXc76K_9__OqKTbCjH%2F-LWXcE_yBI0eiCsEpyZ7%2Fbgp-2.png?alt=media\&token=9f49ee8c-5b28-4ed6-ab03-ca8c26ea9580)

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).

```css
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.

```css
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.

```css
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:

```css
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:

```css
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:

```css
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).