Taustat

CSS tausta


CSS:n taustanmääritysominaisuuksilla voidaan määritellä erilaisi elementin taustaefektejä.


Esimerkkejä

Set the background color
Taustavärin asettaminen.

Set an image as the background
Taustakuvan asettaminen.

How to repeat a background image
Taustakuvan toistaiminen.

How to repeat a background image only vertically
Taustakuvan toistaiminen vain pystysuunnassa.

How to repeat a background image only horizontally
Taustakuvan toistaminen vain vaakasuunnassa.

How to display a background image only one time
Taustakuvan esittäminen ilman toistoa.

How to place the background image
Taustakuvan sijainnin määrittäminen.

How to position a background image using %
Taustakuvan sijoittaminen prosentteja käyttäen.

How to position a background image using pixels
Taustakuvan sijoittaminen pikseliarvoja käyttäen.

How to set a fixed background image
Kiinnitetyn (ei-scrollaavan) taustakuvan asettaminen.

All the background properties in one declaration
Background-ominaisuuden käyttämien kaikkien taustasetusten asettamiseksi yhdellä kertaa.


CSS taustanmääritysominaisuuden

CSS:n taustanmääritysominaisuuksilla voidaan asettaa elementin taustaväri, taustakuva ja kuvan asemointi ja toisto.

Selaintuki: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: Numero "W3C"-sarakkeessa ilmaisee missä W3C:n CSS rekommendaatiossa omionaisuus on määritetty (CSS1 tai CSS2).

Ominaisuus Kuvaus Arvot IE F N W3C
background Oikotie kaikkien taustaominaisuuksien asettamiseksi yhdessä määrityksessä background-color
background-image
background-repeat background-attachment background-position
4 1 6 1
background-attachment

Määrittää onko taustakuva kiinnitetty vai sivun mukana scrollaava

scroll
fixed
4 1 6 1
background-color Asettaa elementin taustavärin color-rgb
color-hex
color-name
transparent
4 1 4 1
background-image Asettaa taustakuvan url(URL)
none
4 1 4 1
background-position Asettaa taustakuvan asemoinnin top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
4 1 6 1
background-repeat Määrittää kuinka taustakuvaa toistetaan repeat
repeat-x
repeat-y
no-repeat
4 1 4 1
AttachmentSize
CSS_tausta_harjoitukset.doc14.5 KB