07 – Szín- és háttértulajdonságok

Color: az adott elem színét adhatjuk meg vele. Pl.

1
H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }

Background Color: az adott elem háttérszínét lehet vele beállítani. Pl.

1
BODY { background-color: blue } H5   { background-color: #0000ff }

Background Image: az adott elemhez háttérképet rendelhetünk vele. Pl.

1
2
BODY { background-image: url(../kepek/kep.gif)
P { background-image: url(http://www.valahol.hu/kep.jpg)

Background Repeat: megadhatjuk, hogy a background-image-nél definiált háttérképet hogyan ismételje meg a böngésző. A lehetséges értékek: repeat (ismétlés folyamatosa, amennyiszer elfér, mindkét irányban), repeat-x (ismétlés csak vízszintesen), repeat-y (ismétlés csak függőlegesen), no-repeat (nem ismétlődik). Pl.

1
2
BODY { background: blue url(kep.gif);
background-repeat: repeat-x; }

Background Attachment: megadhatjuk, hogy a háttérkép együtt gördüljön-e a felette levő oldal tartalmával, vagy sem. Lehetséges értékei: scroll (gördül), fixed (nem gördül). Pl.

1
2
BODY { background: blue url(kep.gif);
background-attachment: fixed }

Background Position: megadhatjuk vele a háttérkép pozícióját, százalékos vagy hosszúság értékekben, illetve az elhelyezését vízszintesen balra (left), jobbra (right), illetve középre (center), függőlegesen pedig felülre (top), középre (center), illetve alulra (bottom) igazítva. Csak blokkszintű elemeknél használható.

Background: ez a tulajdonság rövidítésként, ill. összevonásként használható a többi fenti tulajdonság (background-color, background-image, background-repeat, background-attachment, background-position) megadásához. Pl.

1
2
3
4
BODY { background: blue url(http://www.valahol.hu/kep.gif) } 
BLOCKQUOTE { background: #ff00ff } 
P { background: url(../hatter/kep.jpg) #00ff00 fixed } 
TABLE { background: #0c0 url(masikkep.jpg) no-repeat bottom right}

A szerző honlapja: http://fodorsi.ini.hu

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét