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
Bakgrundsfäste
När man skrollar på en sida brukar sidan följa med ner eller så sitter den fast. Om den sitter fast stannar den på en och samma plats oavsett hur långt ner eller upp du skrollar. Om någon del av sidan följer med när man skrollar innebär det att den inte sitter fast.
Koden för bakgrundens fäste: background-attachment:fixed. Om man vill ha den så att den skrollar ned raderar man hela den raden ”background-attachment:fixed ” eller skriver in scroll istället för fixed.
Källa: http://www.w3schools.com/css/css_background.asp
Bakgrundsposition
background-position:top left;
Koden ”background-position” bestämmer vart man vill ha bilden. Vill man ha den centrerad på sidan skriver man in center istället för top-left. Observera att alla koder är skrivna på amerikansk engelska. Alltså kan du inte skriva colour, utan du måste skriva color. Jag har valt att ha den längst upp till höger eftersom jag även valt att bilden ska repeteras. Om man väljer att repetera en bild brukar det vara för att bilden är liten men man vill ha samma bild fast som en repetition. Vill ha endast en och samma bild men vill att den ska täcka hela sidan får man göra om bildstorleken själv och hör inte till webb design.
Centrerad bild = center
Bild till höger = right
Bild till vänster = left
Bild i botten = bottom
Bild i toppen = top
Top left innebär att den ligger längst upp till höger. Du kan ändra position på bakgrundsbilden om du vill ha bilden i mitten till höger till exempel. Då blir koden background-position:right center;. (Det spelar ingen roll om man skriver right före center eller center före right.) Nu när du vet detta kan du bestämma position på bakgrundsbilden till vart du vill i princip.
Källa: http://www.w3schools.com/css/css_background.asp
