Globale linker

CSS

background

CSS-standarden gir oss følgende egenskaper for å kontrollere bakgrunnselementer:

background-color bestemmer bakgrunnsfargen i et element.
background-image bestemmer bakgrunnsbildet i et element.
background-repeat bestemmer hvordan bakgrunnsbilder skal repeteres i et element.
background-position bestemmer posisjonering av bakgrunnsbilder.
background-attachment bestemmer om bakgrunnsbildet skal ligge fast, altså om bakgrunnsbildet skal igge fast når man scroller, eller skal følge med i scrollingen.

background-color

Med bakground-color bestemmer du bakgrunnsfargen i et element:

p {background-color:red}

background-image

Med background-image bestemmer du bakgrunnsbilde for elementet.

body {background-image:url(images/bilde.jpg}

Hvis du ikke vil angi bakgrunnsbilde: backgrund-image:none

Bakgrunnsbilder repeteres til høyre og under hverandre hvis bildet ikke er stort nok til å fylle hele elementet.

background-repeat

Med background-repeat velger du hvordan et bakgrunnsbilde skal repeteres hvis det ikke er stort nok til å fylle hele elementet. Kan ha verdiene

repeat-x, bildet repeteres kun langs x-aksen, altså horisontalt (bortover)
repeat-y, bildet repeteres kun langs y-aksen, altså vertikalt (nedover)
no-repeat bildet repeteres ikke i det hele tatt
repeat (default) bildet repeteres både horisontalt og vertikalt ved behov.

body {
				background-image:url(mittbilde.jpg);

				background-repeat: repeat-y
			}

background-attachment

Med background-attachment kan du bestemme om bakgrunnsbildet skal scrolle sammen med resten av innholdet eller bli stående fast. Kan ha en av to verdier:

scroll bakgrunnsbildet scroller med resten av innholdet.
fixed bakgrunnsbildet blir liggende fast mens resten av innholdet scroller over.

body {
					background-image:url(images/bilde.jpg);

						background-attachment:fixed
					}

background-position

Som default ligger et bakgrunnsbilde i øverste venstre hjørne av et element. Med background-position bestemmer du hvor bakgrunnsbildet skal vises i elementet. Dette gjøres ved å angi to verdier, en for den horisontale og en for den vertikale posisjonen i forhold til øverste venstre kant av elementet. ( f.eks: background-position: 10px 50px).

Verdier som kan brukes er: ex, em, px, cm, mm, pc, in, pt eller %. Du kan også bruke forhåndsdefinerte verdier som:

left top (default)
center top (eller bare top fordi elementer som er top justert som default er sentrert)
right top
left center (eller bare left)
center center (eller bare center)
right center (eller bare right)
left bottom
center bottom (eller bare bottom)
right bottom

Rekkefølgen på disse forhåndsdefinerte har ingen ting å si, background-position:left top er det samme som background-position:top left.

body {
				background-image:url(images/bilde.jpg);

				background-position: 50% 50%
			}

background

Shorthand-metode for background i følgende rekkefølge:

background: background-color background-image background-repeat background-attachment background-position

For eksempel:

background: #FFFFFF url(bilde.gif) no-repeat fixed left top

Gå til neste side hvor vi ser på Classification-egenskaper