A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Szín- és háttérbeállítás stíluslappal

Tanulási útmutató

Összefoglalás

A leckében áttekintjük a szöveg- és háttérszín beállítási lehetőségeket, majd a háttérkép beállítási módokat vesszük sorba.

Tartalomjegyzék

Szín- és háttérbeállítás stíluslappal

Szín- és háttérbeállítás stíluslappal

Ebben a leckében a szín, háttérszín és háttérkép beállítási módjait tekintjük át. Mielőtt ezt megtennénk, érdemes az akadálymentességi szempontokkal is megismerkedni.

Kapcsolódó akadálymentességi elvek

A WCAG 2.0 szabvány 1.4-es irányelve a megkülönböztethetőségről szól.

1.4 Irányelv: Megkülönböztethetőség: Könnyítsük meg a felhasználók számára a tartalom érzékelését (látását és hallását), beleértve az előtér és háttér megkülönböztethetőségét.
1.4.1 Színhasználat: Nem a szín az egyetlen vizuális módja az információ közvetítésének, a tevékenység jelzésének, a válaszadásra ösztönzésnek, vagy a vizuális alkotóelemek megkülönböztetésének. (A szint)

Vagyis ügyeljünk arra, hogy ne csak a szín hordozzon információt, mert a színtévesztő/színvak felhasználók számára ez nem megfelelő.

A színek használatánál ügyelnünk kell arra is, hogy az előtér és háttér között legyen akkora kontrasztkülönbség, hogy a szöveg jól olvasható legyen. Erről szól az 1.4.3-as teljesítési feltétel.

1.4.3 Kontraszt (Minimum): A szöveg és a képként reprezentált szöveg vizuális megjelenítése esetében a kontrasztarány minimum 4,5:1, kivéve az alábbi esetekben: (AA szint)

Nagybetű: A nagy betűmérettel szerkesztett szövegek és a nagy betűméretű képként reprezentált szöveg esetében a kontrasztarány minimum 3:1;

Járulékosság: Az a szöveg vagy képként reprezentált szöveg nem rendelkezik minimum-kontraszt feltétellel, amely inaktív felhasználói interfész alkotóeleme, vagy csupán dekoráció, vagy egy képen szereplő járulékos szöveg, vagy nem látható.

Logó típusok: A logóhoz vagy márkanévhez tartozó szövegek nem rendelkeznek minimum kontraszt feltétellel.

De hogyan tudunk meggyőződni a kontrasztarányról. Ha például a Mozilla Firefox böngészőt használjuk, akkor telepíthetjük a WCAG Contrast checker bővítményt, ami segíti az ellenőrzést.

Szöveg színének beállítása (color)

A szöveg színbeállítása korábban több példánkban is szerepelt, de úgy a helyes, hogy ebben a fejezetben is bemutassuk a color paramétert.

Értékek:

Tetszőleges színértéket értékül adhatunk.
Az inherit értéket értékül adva, a szülő elemtől örököltethetjük meg a tulajdonság értékét. (Ez amúgy automatikusan is megtörténik, így ha a body tagben megadunk egy betűszínt, akkor ezt az összes gyermeke megörökli.)

A color tulajdonság értékei öröklődnek. A paraméter használati módját a háttérszínnel együtt mutatjuk be.

Vissza a tartalomjegyzékhez

Háttérszín beállítása (background-color)

A background-color tulajdonsággal az elemeink háttérszínét állíthatjuk be.

Értékek:

Tetszőleges színértéket értékül adhatunk.
Az inherit értéket értékül adva, a szülő elemtől örököltethetjük meg a tulajdonság értékét. (Ez amúgy automatikusan is megtörténik, így ha a body tagben megadunk egy betűszínt, akkor ezt az összes gyermeke megörökli.)
Az alapérték a transparent, vagyis átlátszó.

A background-color tulajdonság értékei nem öröklődnek.

Példa - Színbeállítások

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Színbeállítások</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:lightyellow;}
  div {
     width:180px;    /*szélesség*/
     height:100px;   /*magasság*/
     margin:5px;    /*margó*/
     padding:10px;   /*belső kitöltés*/ 
     float: left;              /*balra lebegtetés*/
     text-align:center;        /*szöveg igazítása középre*/
     font-weight:bold;         /*félkövér kiemelés*/
     border:1px solid black;   /*szegély beállítás*/
     }
  div:nth-child(1) { 
                    background-color:azure;
                    color:blue;
                   }   
  div:nth-child(2) { 
                    background-color:#0000ff;
                    color:#fff;
                  }   
  div:nth-child(3) { 
                    background-color:rgb(0,0,255);
                    color:#fff;
                   }   
  div:nth-child(4) { 
                    background-color:rgba(0,0,255,0.6);
                    color:#fff;
                   }   
  div:nth-child(5) { 
                    background-color:rgba(0,0,255,0.2);
                    color:#000;
                   }
  div:nth-child(6) { 
                    background-color:hsl(100,70%,50%);
                    color:#000;
                   }
</style>
</head>
<body>
  <div>1. példa<br>
       background-color:azure;<br>
       color:blue;
  </div>
  <div>2. példa<br>
       background-color:#0000ff;<br>
       color:#fff;
  </div>
  <div>3. példa<br>
       background-color:rgb(0,0,255);<br>
       color:#fff;
  </div>
  <div>4. példa<br>
       background-color:rgba(0,0,255,0.6);<br>
       color:#fff;</div>
  <div>5. példa<br>
       background-color:rgba(0,0,255,0.2);<br>
       color:#000;
   </div>
  <div>6. példa<br>
       background-color:hsl(100,70%,50%);<br>
       color:#000;
  </div>
</body>
</html>

Magyarázat

A példában színkonstanssal (pl. azure, blue), hexadecimális (#0000ff), rgb, rgba és hsl megadással is látunk szín és háttérszín megadást. Fontos látni, hogy a 4. és 5. példában ugyanaz a háttérszín lett beállítva, mint a 3. példában, de ezeknél az átlátszóság értéket is módosítottuk.

Kapcsolódó akadálymentességi elvek

Ügyelni kell a színek és háttérszínek megadásánál arra, hogy eléggé kontrasztosak legyenek ahhoz, hogy a szöveget gyengén látó felhasználók is el tudják olvasni.

A Firefox böngészőbe érdemes telepíteni a WCAG Contrast Checker bővítményt, amellyel meg tudunk győződni arról, hogy a kontrasztarány megfelelő-e az oldalunkon.

Vissza a tartalomjegyzékhez

A háttérkép beállításai

A háttérkép megadása (background-image)

A background-image tulajdonság segítségével háttérképet állíthatunk be elemeinknek.

Értékek:

A hátteret egy a képre mutató url segítségével állíthatjuk be.
A none értéket értékül adva, utasítjuk a böngészőt, hogy ne állítson be háttérképet.

A background-image tulajdonság értékei nem öröklődnek.

A hátteret alapesetben mozaikszerűen fogja elrendezni a böngészőprogram, de ezt felülbírálhatjuk a később bemutatott módon.

Példa

Forráskód

 body {background-image:url(hatter.png);}

Háttérkép ismétlődése (background-repeat)

A background-repeat tulajdonság segítségével a beállított háttérkép ismétlődési szabályát állíthatjuk be.

Értékek:

repeat: a háttérkép mind vízszintesen, mind függőlegesen ismétlődni fog.
repeat-x: érték hatására a böngésző vízszintesen ismételni fogja a háttérképet.
repeat-y: érték hatására a böngésző függőlegesen ismételni fogja a háttérképet.
no-repeat: érték hatásra a háttérkép csak egyszer jelenik meg, ismétlődés nélkül.
space: a háttérkép mindaddig ismétlődik vízszintesen és függőlegesen, amíg kifér teljes egészében. Aztán térközök illesztődnek a képek közzé, hogy a szélső képek szélei illeszkedjenek a tartalmazó elem széleihez.
round: a kép mindaddig ismétlődik vízszintesen és függőlegesen, amíg csak belefér az elemébe, majd átméreteződnek, hogy teljesen betöltsék a rendelkezésre álló területet.

Megjegyzés

A tananyag írásának pillanatában a space és round érték böngészőtámogatottsága még elenyésző. És sajnos a böngészők által biztosított fallback sem egységes, a Firefox például repeat értékkel helyettesíti a nem ismert space, illetve round értéket, a Chrome és Safari viszont no-repeat értékkel.

Példa - Háttér ismétlődés beállítások

Interaktív példa

Magyarázat

A fenti példában az összes felsorolt érték hatását látjuk (amennyiben a böngészőprogram támogatja. Sajnos a space és round érték támogatottsága egyelőre nem túl jó.

A háttér pozícionálása (background-position)

Az előbbi példában láthattuk, hogy ha a háttérkép nincs ismételve (no-repeat), akkor csak egyszer jelenik meg, alapesetben a bal felső sarokban. Azonban a háttérkép pozícióját tetszőlegesen megváltoztathatjuk a background-position paraméterrel.

Értékek:

top: az elem tetejére igazítja a hátteret.
bottom: az elem aljára igazítja a hátteret.
left: az elem bal oldalára igazítja a hátteret.
right: az elem jobb oldalára igazítja a hátteret.
center: az elem közepére igazítja a hátteret.
Ha szóközzel elválasztva kettőt adunk meg fenti értékek közül, akkor az első a vízszintes, a második a függőleges pozícionálásért fog felelni. Azaz:
- left top: balra fel igazít.
- left center: balra, középre igazít.
- left bottom: balra le igazít.
- right top: jobbra fel igazít.
- right center: jobbra, középre igazít.
- right bottom: jobbra le igazít.
- center top: középen fel igazít.
- center center: teljesen középre igazít.
- center bottom: középre le igazít.
Megadhatunk hosszúságértékeket. Ezek a bal felső sarokhoz képpest történő eltolást adják meg. Megadhatunk negatív értéket is.
- Ha két értéket adunk meg, akkor azokat szóköz választja el. Az első érték a vízszintes, pozitív érték esetén jobbra történő eltolásért felelős. Míg a második érték a függőleges, pozitív érték esetén lefele történő eltolásért felel.
- Ha egy értéket adunk meg, azt az első paraméternek helyettesíti be, míg függőlegesen középre igazít.
Megadhatunk százalékos értéket is.
- Ha két értéket adunk meg akkor az első paraméter a vízszintes eltolást a szülő elem szélességéhez, a második pedig a szülő elem magasságához képpest határozza meg.
- Ha egy százalékos értéket adunk meg, az az előző pontban tárgyaltakkal analóg viselkedést eredményez.

Példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Háttérkép pozíciójának beállítása</title>
<meta charset="utf-8">
<style type="text/css">
 div {
    background-image:url('specialis/css/hangjegy.png'); /*háttérkép beállítása*/
    width:170px;    /*szélesség beállítása*/
    height:170px;   /*magasság beállítása*/
    margin:10px;    /*margó beállítása*/
    float:left;     /*balra lebegtetés*/
    border:2px solid black;  /*szegély beállítása*/
    background-color:beige;  /*háttérszín beállítása*/
     }
     
    div:nth-child(1) {
                    background-repeat:no-repeat;
                    background-position:right top;
                    }
    div:nth-child(2) {
                    background-repeat:no-repeat;
                    background-position:center center;
                    }
    div:nth-child(3) {
                    background-repeat:repeat-y;
                    background-position:right top;
                    }
    div:nth-child(4) {
                    background-repeat:repeat-x;
                    background-position:30px 100px;
                    }
    div:nth-child(5) {
                    background-repeat:repeat-x;
                    background-position:10% 30%;
                    }                    
   
    div:nth-child(6) {
                    background-repeat:repeat;
                    background-position:67% 70%;
                    }       
</style>
<body>
  <div>1.</div>
  <div>2.</div>
  <div>3.</div>
  <div>4.</div>
  <div>5.</div>
  <div>6.</div>
</body>
</html>

Magyarázat

A fenti példákban igyekeztünk a kulcsszóval, képponttal, százalékkal történő pozícionálásra is példát hozni. Figyeljük meg, hogy a pozícionálásnak akkor is szerepe van, amikor a háttér ismétlődik, hiszen beállíthatjuk azt, hogy a kép milyen pozícióra kerüljön, ahonnan az ismétlődés elkezdődik.

A háttér elhelyezésének viszonyítási helyzete (background-origin)

A background-origin tulajdonság segítségével beállíthatjuk, hogy a background-position értékét mihez képest számoljuk.

Értékek:

padding-box: a kép relatívan kerül elhelyezésre a kitöltés dobozban (padding-box). Ez az alapértelmezett érték.
border-box: hatására a böngésző a képet az elem szegélyének külső éléhez igazítja relatívan, a szegély mögé helyezve.
content-box: hatására a böngésző a képet az elem tartalmának külső éléhez igazítja relatívan.

Példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Background-origin szemléltetése</title>
<meta charset="utf-8">
<style type="text/css">
 div {
    background-image:url('specialis/css/hangjegy.png'); /*háttérkép beállítása*/
    width:170px;    /*szélesség beállítása*/
    height:170px;   /*magasság beállítása*/
    margin:20px;    /*margó beállítása*/
    float:left;     /*balra lebegtetés*/
    border:15px double rgba(0,0,0,0.3);  /*szegély beállítása*/
     background-color:beige;  /*háttérszín beállítása*/
     background-repeat: repeat; /*háttérkép ismétlődik*/
     padding:20px;
     }
div span  { /*beállítjuk a divben megjelenő feliratsáv tulajdonságait */
    display:block; 
    background-color:rgba(0,200,0,0.9);
    color:white; 
    font-weight:bold;
    text-align:right;
    padding:5px;
    }
      
div:nth-child(1) {background-origin: padding-box; }     
div:nth-child(2) {background-origin: border-box; }     
div:nth-child(3) {background-origin: content-box; }     
    
</style>
<body>
  <div><span>padding-box</span></div>
  <div><span>border-box</span></div>
  <div><span>content-box</span></div>
</body>
</html>

A háttérkép rögzítése (background-attachment)

A background-attachment tulajdonsággal rögzíthetjük hátterünket, vagy éppen a tartalommal együtt gördíthetővé tehetjük.

Értékek:

A scroll érték hatására a háttér rögzítve lesz az elemhez és nem gördítődik a tartalommal. (ez az alapbeállítás).
A fixed érték hatására az adott viewporthoz rögzül a háttérkép.
A local érték azt jelenti, hogy a háttér az elem tartalmához rögzítődik. Ha az elem önáló gördítési lehetőséggel rendelkezik, akkor a háttér együtt gördül a tartalommal.

A három érték közti különbséget egy komplex példán tudjuk bemutatni.

Példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Háttér csatolása</title>
<meta charset="utf-8">
<style type="text/css">
 body {
  background-image:url('specialis/css/hangjegy.png'); /*háttérkép beállítása*/
  background-attachment:fixed;
  background-repeat:repeat-y;
  padding-left:60px;
  width:500px;
  } 
     
div {
     height:100px;
     overflow:auto;
     background-image:url('specialis/css/hangjegy.png'); /*háttérkép beállítása*/
    background-repeat:repeat-y;
     padding-left:60px;
     border:1px dotted gray;
     margin:10px 0;
}    
div#pelda1 {background-attachment:scroll;}
div#pelda2 {background-attachment:fixed;}
div#pelda3 {
               background-attachment:fixed;
               background-position:70px 10px;
               }
div#pelda4 {background-attachment:local;}
               
</style>
<body>
<div id="pelda1">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, mi eget faucibus molestie, elit augue gravida lorem, ultrices ultrices dolor mi vel arcu. Integer congue eros vel nisl congue interdum. Vestibulum ultrices dolor leo, sed condimentum risus sollicitudin id. Aliquam scelerisque enim id bibendum tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra magna dolor, a gravida turpis semper non. Phasellus ac luctus magna.
     </p>
</div>
<div id="pelda2">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, mi eget faucibus molestie, elit augue gravida lorem, ultrices ultrices dolor mi vel arcu. Integer congue eros vel nisl congue interdum. Vestibulum ultrices dolor leo, sed condimentum risus sollicitudin id. Aliquam scelerisque enim id bibendum tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra magna dolor, a gravida turpis semper non. Phasellus ac luctus magna.
     </p>
</div>
<div id="pelda3">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, mi eget faucibus molestie, elit augue gravida lorem, ultrices ultrices dolor mi vel arcu. Integer congue eros vel nisl congue interdum. Vestibulum ultrices dolor leo, sed condimentum risus sollicitudin id. Aliquam scelerisque enim id bibendum tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra magna dolor, a gravida turpis semper non. Phasellus ac luctus magna.
     </p>
</div>     
<div id="pelda4">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, mi eget faucibus molestie, elit augue gravida lorem, ultrices ultrices dolor mi vel arcu. Integer congue eros vel nisl congue interdum. Vestibulum ultrices dolor leo, sed condimentum risus sollicitudin id. Aliquam scelerisque enim id bibendum tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra magna dolor, a gravida turpis semper non. Phasellus ac luctus magna.
     </p>
</div>     
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, mi eget faucibus molestie, elit augue gravida lorem, ultrices ultrices dolor mi vel arcu. Integer congue eros vel nisl congue interdum. Vestibulum ultrices dolor leo, sed condimentum risus sollicitudin id. Aliquam scelerisque enim id bibendum tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra magna dolor, a gravida turpis semper non. Phasellus ac luctus magna.
     </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, mi eget faucibus molestie, elit augue gravida lorem, ultrices ultrices dolor mi vel arcu. Integer congue eros vel nisl congue interdum. Vestibulum ultrices dolor leo, sed condimentum risus sollicitudin id. Aliquam scelerisque enim id bibendum tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra magna dolor, a gravida turpis semper non. Phasellus ac luctus magna.
     </p>     
  </body>
</html>

Magyarázat

A body elemnél fixed értéket állítottunk be a háttér rögzítéseként. Emiatt, ha a függőleges gördítősávot használjuk, a háttérkép egy helyben marad, nem gördül a tartalommal. Ha a fixed értéket scroll értékre átírjuk, akkor viszont már a háttérkép is gördül a tartalommal.

A helyzet akkor bonyolódik, ha olyan elemeket is elhelyezünk az oldalon, amelyeket önmagukban is lehet gördíteni. A példánkban négy ilyen divet hoztunk létre, korlátoztuk a magasságát és az overflow paraméterrel gördíthetővé tettük.

Az első divnél scroll értéket állítottunk be. Emiatt a háttérkép egy helyben marad a gördítésnél.
A második div esetén fixed értéket állítottunk be. Itt azt tapasztaltuk, hogy nem jelent meg a háttérkép, hiszen a fixed érték esetén az a viewport bal felső sarkától ismétlődik.
A harmadik divnél szintén fixed értéket állítottunk be, de a háttérkép pozícióját beálítottuk úgy, hogy a div területére essen, így már megjelent a háttérkép. Az is észrevehető, hogy ha az egész oldalt gördítjük, akkor a háttérkép más-más szeletét látjuk, mivel az az ablakhoz van rögzítve.
A negyedik divnél a local értéket állítottuk be. Azt tapasztaljuk, hogy a háttérkép együtt gördül a tartalommal.

A háttérkép átméretezése (background-size)

A background-size tulajdonság segítségével a héttérképünk méretét állíthatjuk be.

A background-size tulajdonság értékei nem öröklődnek.

Értékek:

Megadhatunk tetszőleges hosszúságértékeket. Egy érték esetén az érték a szélességet jelenti, a második auto értéket vesz fel. Két szóközzel elválasztott érték esetén az első a vízszintes a második a függőleges méretet határozza meg.
Megadhatunk százalékos értékeket. Ekkor a szélesség és a magasság a szülő elem szélességéhez lesz viszonyítva. Az első érték a vízszintes a második a függőleges méretet határozza meg. Egy érték esetén a függőleges és a vízszintes méret is a tartalmazó elem szélességéhez és magasságához lesz viszonyítva.
Használhatjuk a következő kulcsszavakat:
- cover: a böngésző a tartalmazó elem szélességére, vagy magasságára méretezi a háttérképet, az eredeti képarány megtartásával.
- contain: a böngésző a legkisebb olyan méretre méretezi a képet, hogy az teljesen elférjen az elemben a képarány megtartása mellett.
- auto: a háttérkép megtartja eredeti képarányát.

Példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Háttér mérete</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:GoldenRod ;}
div {
    width:500px;    /* szélesség beállítása*/
    height:280px;    /*magasság beállítása*/
    background-image:url('specialis/css/matyastemplom_teto.jpg'); 
     /*háttérkép beállítása*/
    background-repeat:no-repeat; /*a háttér ne ismétlődjön*/
    margin:10px 0;               /*margó beállítás*/
    border:2px solid black;         /*szegély beállítás*/
    background-color:white;        /*fehér háttérszín beállítás*/
}    
div span  { /*beállítjuk a divben megjelenő feliratsáv tualjdonságait */
    display:block; 
    background-color:rgba(0,200,0,0.9);
    color:white; 
    font-weight:bold;
    text-align:right;
    padding:5px;
    }
    /*beállítjuk az egyes divek hátterének méretezését*/
    div:nth-child(1) {background-size:auto;}
    div:nth-child(2) {background-size:1000px;}
    div:nth-child(3) {background-size:300px 150px;}
    div:nth-child(4) {background-size:60% 100%;}
    div:nth-child(5) {background-size:cover;}
    div:nth-child(6) {background-size:contain;}
</style>
<body>
    <div><span>background-size:auto</span></div>
    <div><span>background-size:1000px</span></div>
    <div><span>background-size:300px 150px</span></div>
    <div><span>background-size:60% 100%</span></div>
    <div><span>background-size:cover</span></div>
    <div><span>background-size:contain</span></div>
</body>
</html>

Magyarázat

A fenti példában bemutattuk a méretezésre vonatkozó különböző beállításokat. Látható, hogy ha méretnek nagyobbat állítunk be, mint ami a kép fizikai mérete, akkor a felnagyított kép egy részletét fogjuk látni. A többi példa működése a leírás alapján egyértelmű.

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.