CSS: Tausta 2008-01-01 02:34

Väriarvoina toimivat taustalla samat kuin edustallakin. Lisäksi taustalle voidaan liittää kuva.

Colors and backgrounds

Värit ja taustat W3C:n CSS-spesifikaatiossa.

background-color

background-color muuttaa halutun alueen taustaväriä. Arvot annetaan kuten color-ominaisuudelle. Muutetaan koko sivun taustaväriä ja edustaväriä.

body {
	background-color: rgb(237,224,193);
	color: #000;
}

background-image (url | none)

Ominaisuudella background-image määritellään taustakuvan tai -kuvion sijainti tiedostona. Muista että suhteellinen url annetaan suhteessa CSS-tiedoston sijaintiin.

body {
	background-image: url(grafiikka/taustakuvio.gif);
}
#keksitty {
	background-image: url(grafiikka/logo.gif);
}

background-position (left/right/center top/bottom | x% y% | x-px y-px)

Ominaisuudella background-position määritetään taustakuvan sijainti. Arvo voidaan ilmoittaa eri tavoin, jokaisella tavalla vaakasuuntainen sijainti ilmoitetaan ensin, ja välilyönnillä erotettuna pystysuuntainen sijainti. Esimerkkejä:

#keksitty {
	background-position: left top; /* vasen yläkulma */
	background-position: 0% 0%; /* vasen yläkulma */
	background-position: 100% 0%;  /* oikea yläkulma */
	background-position: 50px 20px; /* 50px vasemmalta 20px ylhäältä */
}

background-repeat (no-repeat | repeat | repeat-x | repeat-y)

Ominaisuudella background-repeat määritetään onko taustakuva toistuva, eli esiintyykö se vain kerraan vai kopioidaanko se koko taustan alueelle. Toistumisen voi määrittää myös nauhamaisesti vain vaaka- (x) tai pystysuuntaiseksi (y).

#keksitty {
	background-repeat: no-repeat; /* ei toistu, esim. logo */
	background-repeat: repeat; /* toistuva taustagrafiikka */
	background-repeat: repeat-x;  /* vaakasuuntainen toisto */
	background-repeat: repeat-y; /* pystysuuntainen toisto */
}

background-attachment (fixed | scroll)

Ominaisuudella background-attachment määritellään onko taustakuva sivun vierittämisen mukana vieritettävä, vai pysykö se paikallaan muun sisällön vieriessä.

#keksitty {
	background-attachment: fixed; /* paikallaan pysyvä */
	background-attachment: scroll; /* vierivä */
}

background

background-ominaisuus yhdistää edellä mainitut, ja niille annetut arvot voidaan määrittää yhdellä rivillä välilyönneillä erotettuna. Arvojen järjestys: background-color, background-image, background-position, background-repeat, background-attachment.

body {
	background: rgb(237,224,193) url(taustakuvio.gif) top left repeat scroll;
}
#keksitty {
	background: #fff url(grafiikka/logo.gif) 100% 0% no-repeat fixed;
}

Linkit

Taustakuvien asettelua CSS:lla

Erilaisia tapoja asetella taustakuva.