kaxigt.com

Välkommen till femte lektionen!

En hemsida är ganska så intetsägande utan bilder och färger. Vi ska nu gå igenom hur man gör för att sätta färg på bakgrunden, och lägga in en bakgrundsbild.

• Bakgrundsfärg
• Bakgrundsbild
• Position, repeat, attachment

Bakgrundsfärg

När vi hör ordet bakgrund så är det oftast bakgrunden för själva sidan vi i första hand tänker på, det vill säga body. Men en bakgrundfärg kan också anges för andra element, exempelvis olika divblock och tabeller. I guiden om fonter lade vi också till en bakgrundsfärg på texten. Så bakgrund kan betyda mycket.

För att ge en färgad bakgrund åt själva dokumentets body så är css-syntaxen följande:

body {background-color: #000;}

Du kanske använder tabeller till data och vill skifta färg i tabellcellerna? Kika då på följande märkningar. Man kan både använda class-attribut som globala värden – allt efter tycke och smak. Här har hela tabellen ett globalt värde: svart bakgrund och vit textfärg.

table {background-color: #000; color:#fff;}

Nu ska vi sätta färg på tabellcellerna. Värdet är globalt.

td {background-color: #ccc; color:#333;}

Vill man göra det lite mer avancerat då är class-attributet en bra hjälp. Först måste du ange en class selector i din stilmall. Observera att detta inte blir ett globalt värde.

Css-syntax:

.td1 {background-color: #000; color:#fff;}

HTML-kod:

<table><tr><td class="td1">cellen får nu en svart bakgrundsfärg och vit text</td></tr></table>

Bakgrundsbild

Vill du använda en bakgrundsbild på din webbsida ser css-syntax ut så här.

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

Tillsammans med bakgrundsfärg och textfärg:

body {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

Bakgrundsbild i en tabell:

table {background-image: url(din_bild.jpg);}

Tillsammans med bakgrundsfärg och textfärg:

table {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

Bakgrundbild, bakgrundsfärg, och textfärg i tabellcellerna.

Globalt värde:

td {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

Som class-attribut:

.td1 {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

HTML-koden:

<table><tr><td class="td1">cellen får nu en svart bakgrundsfärg, vit text, samt en bakgrundsbild</td></tr></table>

Vill du lägga in en bakgrundsbild i ett div-block?

#(vald ID-selektor) {background-image: url(din_bild.jpg);}

Position, repeat, attachment

Så här långt har vi alltså lagt in en bakgrundsbild, nu ska vi dels positionera bilden, dels bestämma om den ska upprepas samt hur den i så fall ska upprepas, och dels om bilden ska vara fixerad (icke-scrollbar med layouten) eller inte.

Positionera en bild

Deafultläget (grundläget) för en webbläsare är vänsterställt | vänster hörn | högst upp. Det innebär att om man inte formaterar en bild (eller text) så kommer den att lägga sig allra längst upp i det vänstra hörnet.

Med css har du alltså själv möjlighet att bestämma utgångsläget för placeringen av din bild.

Vi ska kika på vilka alternativ det finns och hur dessa fungerar.

Det finns fem olika koordinater: top, bottom, left, right och center. Du kan även välja att positionera bilden med följande enheter: centimeter (cm), pixlar (px), procent (%) och em.

Utgångsläget är alltid från det vänstra övre hörnet – top left.

Css-syntax utan enheter:

1. background-position:top left; Vänstra övre hörnet
2. background-position:top right; Högra övre hörnet
3. background-position:center center; Mitten
4. background-position:bottom left; Vänstra nedre hörnet
5. background-position:bottom right; Högra nedre hörnet

Css-syntax med procentenheter:

1. background-position:0% 0%; Vänstra övre hörnet
2. background-position:50% 50%; Mitten
3. background-position:100% 100%; Högra nedre hörnet

Css-syntax med pixlar:

1. background-position:30px 30px; 30px avstånd från left + 30px avstånd från top
2. background-position:10px 100px; 10px avstånd från left + 100px avstånd från top

Upprepa en bild – repeat

Används en bild som bakgrundsbild kan man behöva repetera bilden. Precis som i positioneringen kan man välja hur bilden ska repeteras, eller om den inte ska repeteras.

Css-syntax:

1. background-repeat:no-repeat; – ingen upprepning (defaultläget vänstra övre hörnet)
2. background-repeat:repeat; – upprepas från left till right och top till bottom
3. background-repeat:repeat-x; – upprepas endast horisontellt (vänster till höger)
4. background-repeat:repeat-y; – Upprepas vertikal/lodrätt (top till bottom)

body {background: #000 url(images/background-image.jpg) no-repeat fixed left top ;}