Hantera färger och bilder

Färgvärden
Textfärg
Bakgrundsfärg
Bakgrundsbild

Färger kan anges med namn eller som RGB-värden, och RGB-värdet i sig kan anges på fyra olika sätt:

• #rrggbb
• #rgb
• rgb(x,x,x) - där x är ett heltal mellan 0 och 255
• rgb(x%,x%,x%) - där x är ett tal mellan 0 och 100

Vi vill ange färgen "Lime" - ett i CSS godkänt färgnamn. RGB-värdet är 00FF00 och procentvärdet blir således 0%,100%,0%. Vi kan då ange färgen med ett av följande alternativ:

• color: Lime;
• color: #00FF00;
• color: #0F0;
• color: rgb(0,255,0);
• color: rgb(0%,100%,0%);

Oavsett vilken metod vi väljer kommer färgen att bli densamma.

När du anger en bakgrundsfärg och/eller en bakgrundsbild för sidorna, skall du alltid dessutom ange en textfärg. I de stora webbläsarna kan man själv ställa in vilken färg texten skall visas med. Den färgen används om sidorna inte innehåller en angiven textfärg. Då finns det en risk för att besökaren har valt samma textfärg som du har i bakgrunden och det gör att din text inte syns.

Textfärgen anger du direkt stilmallens BODY-block och/eller i egenskaperna för teckensnitt eller texter. I stilmallen hittar du flera exempel på hur du kan göra.

Resonemanget om textfärg ovan gäller även för bakgrundsfärg och bakgrundsbild. Ta för vana att alltid bestämma textfärg, bakgrundsfärg och bakgrundsbild samtidigt.

Även om bakgrunden kommer att täckas helt av en bild, skall du ta med en bakgrundsfärg som stämmer överens med den viktigaste färgen i bilden. Din besökare kan ha stängt av bildvisningen i sin webbläsare. Om du då har en mörk heltäckande bild med en ljus textfärg och inte anger en bakgrundsfärg, kommer texten att bli oläslig eller till och med osynlig.

Om du inte tänker använda någon bild, utan bara en bakgrundsfärg, skall du ändå ange en bakgrundsbild dessutom. Oftast räcker det med att ange "background-image: none;".

Bakgrundsfärg anges på samma sätt som textfärg och du kan använda den i alla element.

BODY {background-color: Ivory;}
TABLE {background-color: #F0F0F0;}
P {background-color: rgb(127,255,212);}

Bakgrundsbilder kan användas till mycket mer än att bara vara något att titta på. Du kan till exempel skapa lister både vertikalt och horisontellt. Ett exempel på en sådan list är den lilla skuggan längst till vänster i den här ramen. Den består av en 45x15 pixlar stor bild som upprepas i Y-led över hela sidan. Sedan har ramens bakgrund samma färg som längst till höger i bilden, och därmed blir övergången mellan bild och bakgrundsfärg omärklig. Så här ser stilmallen för just detta ut:

BODY {background-color: ivory; background-image: url(bilder/skugga.jpg); background-repeat: repeat-y;}

Den kan med fördel förenklas en hel del:

BODY {background: ivory url(bilder/skugga.jpg) repeat-y;}

Bakgrundsbilder kan användas i alla element och det finns en rad egenskaper och värden för att påverka bilden. Stödet för egenskaperna är dock olika i Netscape och Internet Explorer.

Background-image anger om en bild skall användas och var den i så fall finns. Värdet kan vara url eller none.

Det är viktigt att sökvägen till bilden anges rätt. Du kan ange den relativa sökvägen - alltså sökvägen i förhållande till mappen där stilmallen befinner sig - eller den absoluta sökvägen, som innehåller hela internetadressen till mappen med bilden.

Relativ sökväg:
BODY {background-image: url(bilder/skugga.jpg);}

Absolut sökväg:
BODY {background-image: url(http://www.supportdata.net/bilder/skugga.jpg);}

Background-repeat anger hur många gånger bilden skall upprepas och hur. Värdet kan vara repeat, repeat-x, repeat-y eller no-repeat.

• repeat gör att bilden upprepas över hela sidan
• repeat-x gör att bilden upprepas i en rad tvärs över sidan
• repeat-y gör att bilden upprepas i en rad längs sidans hela höjd
• no-repaet gör att bilden visas en gång utan upprepning

Med background-position (se nedan) kan du bestämma var på sidan bilden skall visas.

BODY {background-image: url(bilder/skugga.jpg); background-repeat: repeat-y;}

eller:

BODY {background: url(bilder/skugga.jpg) repeat-y;}

Background-attachment bestämmer om bilden skall följa med i scrollningen eller om den skall ligga kvar på en och samma plats så att resten av innehållet på sidan rör sig över en fast bakgrund. Värdet kan vara scroll eller fixed. Det här fungerar inte i Netscape, där bilden följer med i scrollningen oavsett vad du skriver i stilmallen, men eftersom det inte medför att sidan visas fel för övrigt kan du ändå använda egenskapen.

BODY { background-image: url(bilder/logo.jpg); background-attachment: fixed;}

eller:

BODY {background: url(bilder/logo.jpg) fixed;}

Background-position bestämmer var bakgrundsbilden skall visas. Egenskapen kan användas både till bilder som visas en enda gång och till bilder som upprepas. Följande värden finns:

• Horisontella nyckelord left, center, right
• Vertikala nyckelord top, center, bottom - nedan ser du hur de olika nyckelorden tolkas
• Procent Ange den horisontella positionen först, omedelbart följd av den vertikala positionen; procentsatsen sätts i förhållande till elementets storlek.
• Längd Även här anges den horisontella positionen först, följd av den vertikala; eftersom längdvärden kan skapa problem med olika skärmupplösningar, rekommenderas du att inte använda dem.
• Det är tillåtet att kombinera procent och längd, samt att använda negativa värden på dessa. Däremot kan man inte kombinera längd och/eller procent med nyckelord.

Nyckelorden tolkas så här

• top left = left top = 0% 0%
• top = top center = center top = 50% 0%
• right top = top right = 100% 0%
• left = left center = center left = 0% 50%
• center = center center = 50% 50%
• right = right center = center right = 100% 50%
• bottom left = left bottom = 0% 100%
• bottom = bottom center = center bottom = 50% 100%
• bottom right = right bottom = 100% 100%

Om du har satt värdet på background-attachment till "fixed" kommer bilden att placeras i förhållande till webbläsarfönstret i stället för elementet.

I stället för att ange varje egenskap för sig, kan du gruppera dem under egenskapen background.

Följande stilmall

BODY {
background-color: ivory;
background-image: url(bilder/skugga.jpg);
background-repeat: repeat-y;
}

kan bytas mot

BODY {background: ivory url(bilder/skugga.jpg) repeat-y;}

Färgvärden
Textfärg
Bakgrundsfärg
Bakgrundsbild

©SupportData.Net
www.supportdata.net