Bakgrundsbild och -färg
Bakgrundsbild (bilden ovan)
Först skriver man in body för det är just det elementet som skall ändras. Därefter tecknet "{" som man kan skriva genom att hålla inne Alt Gr och klicka på nummer 7-tangenten. Därefter skriver man in marginalen på sidan. Sedan kommer man till bakgrundsfärg och bakgrundsbild (det spelar ingen roll i vilken ordning man skriver dem, så länge de ligger i samma element).
Om man önskar sig en bild som bakgrund får man ladda upp den först så att man kan använda sig utav länken. En sida där man kan snabbt ladda upp en bild är tinypic.com. När man har laddat upp bilden får man fyra alternativ på länkar. En där det står "HTML för Websites", en annan "IMG Code for Forums & Message Boards", "URL for E-Mail & IM" och "Direct Link for Layouts". Det är det sista alternativet "Direct Link for Layouts" som vi vill använda oss utav för det är direktlänken som skall användas. Du kan testa att kopiera länken under Direct Link for Layouts, öppna en ny sida, klistra in länken i sökfältet och klicka enter på tangentbordet. Nu ska du se bilden som du har laddat upp. Om du gör det har du fått rätt länk.
Klistra in den länken mellan parentesen som står efter "background-image: url". Url står för Unifrom Resource Locator och är den formella benämningen för en webbaddress, en länk som till exempel: http://gtwd.blogg.se/.1
Bakgrundsfärg
Dessutom kan man välja vilken färg som ska ligga bakom bilden. Exemplet har färgen vit och koden för vit är #FFFFFF. Vill man ha en vit färg som bakgrund får man skriva in koden background-color: #FFFFFF;. Om man önskar en annan färg får man skriva in en annan färgkod istället för #FFFFFF. Glöm ej fyrkant framför!
body {
margin: 50px 50px 0px 0px;
background-image: url( http://susannim.blogg.se/whatever/images/2010/bg_91905517.gif );
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position:top left;
background-attachment:fixed;
}
Bildbakgrundsrepetition
Därefter får man välja om man vill ha bilden repeterad så att hela webbsidan täcks, men man kan inte förstora en bild så att den sträcker ut sig istället. Det får man göra på bildredigeringsprogram som till exempel Photoshop så att bilden blir automatiskt stor som hemsidan.
För att repetera måste man sätta in koden background-repeat:repeat. Om man inte vill ha den repeterad skall man lägga till "no-" framför repeat efter kolon som det står i exemplet ovan.
body {
margin: 50px 50px 0px 0px;
background-image: url( http://susannim.blogg.se/whatever/images/2010/bg_91905517.gif );
background-color: #FFFFFF;
background-repeat:repeat;
background-position:top left;
background-attachment:fixed;
}
Bakgrundsfärg
Om man inte vill använda en bild och istället vill använda sig utav endast färg gör man helt enkelt så att man raderar bildlänken i parentesen. Då återstår endast den vita färgen. Om annan färg önskas skriver man efter kolon på background-color in koden för färgen som önskas.
body {
margin: 50px 50px 0px 0px;
background-image: url( );
background-color: #FFFFFF;
background-position:top left;
background-attachment:fixed;
background-repeat:repeat;
}
Om man vill ha en rosa bakgrund kan det se ut så här:
Som resultat blir koden:
body {
margin: 50px 50px 0px 0px;
background-image: url( );
background-color: #FF99CC;
background-position:top left;
background-attachment:fixed;
background-repeat:repeat;
}
Det finns fler kodfärger på denna sida: http://www.computerhope.com/htmcolor.htm
Källa: http://www.w3schools.com/css/css_background.asp 20110214
1.http://www.w3.org/Addressing/URL/Overview.html 20110215
