Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

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

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

A háttérkép beállításai (II. rész)

A háttérkép széleinek levágása (background-clip)

A background-clip segítségével levághatjuk a rendelkezésre álló helyből esetlegesen kilógó képrészeket.

Értékek:

Példa
Interaktív példa

Vissza a tartalomjegyzékhez

Több háttérkép megadása (multiple background)

A background-image paraméterben vesszővel elválasztva egyszerre több képet is értékül adhatunk, így egyszerre több háttérképet állíthatunk be. Az első megadott háttérkép kerül a legfelső „rétegre”, alá a következő és így tovább…

Ezen hátterek tulajdonságait a többi háttérparaméter esetén ugyanígy, vesszővel elválasztva adhatjuk meg.

Ha a tulajdonságoknak nem adunk elég értéket, akkor a böngésző a meglevő paraméterlistát addig ismételgeti, amíg szükséges.

Példa
Interaktív példa
Magyarázat
  • Az első példában a két háttérképet nem ismételtetjük és ellentétes sarkokba pozícionáltuk.
  • A második példában az első kép vízszintesen ismétlődik, a második függőlegesen. A virágos kép azért takarja a leveket tartalmazó képet, mert az előbbit adtuk meg a listában először.
  • A harmadik példában mindkét képet függőlegesen ismételtetjük.
  • A negyedik példában az első kép függőlegesen ismétlődik, míg a második kép mozaikszerűen.

Vissza a tartalomjegyzékhez

A background gyorstulajdonság (background)

A background gyorstulajdonsággal az eddig vett háttértulajdonságokat egyetlen nagy értékadássá vonhatjuk össze.

Értékek:

Az különböző értékeket szóközzel választjuk el egymástól.

Szegély mintázat (kép) beállítása (border-image)

A border-image tulajdonság segítségével saját képpel bírálhatjuk felül a szegélystílust. Ezt a képet a böngésző kilenc részre „vágja”, amiből a középső részt elhagyja, sarkokat a szegély sarkainál használja fel, a széleket pedig nyújtva vagy ismételve a szélekhez használja fel.

Paraméterek és értékeik:

A tulajdonság paraméterei szóközzel vannak elválasztva.

Tanulási tipp

A tulajdonság kipróbálásához javasoljuk felkeresni a Border-image-generator oldalt, ahol az egyes paramétereket dinamikusan lehet változtatni.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
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.