NinetNet    HTML & CSS    Bakgrund:  Färg  &  Bild   skriv ut  

Bakgrundsfärg

Bakgrundsfärg anges i CSS-koden med egenskapen background-color.

Här anges sidans bakgrundsfärg med taggen body som selector:

body { background-color: #FFFFFF; }

Bakgrundsfärg kan också anges på boxar, tabeller, tabellrader, tabellceller, länkar, text m.m.

Så här skulle det kunna se ut:

.box { background-color: white; }

table { background-color: black; }

tr { background-color: gray; }

td { background-color: red; }

Och det gäller även för bakgrundsbilder. Läs vidare!

 Till Toppen 

Bakgrundsbild

Bakgrundsbild anges i CSS-koden med egenskapen background-image.

Men det finns fler egenskaper!

Man kan ange om man vill att bilden ska vara fixerad eller inte när sidan scrollas och också bestämma hur man vill att bilden ska repeteras. Dessutom kan man ange bakgrundsbildens position.

Följande egenskaper kan användas tillsammans med background-image:

background-attachment - anger om bilden ska vara fixerad eller inte
background-repeat - anger hur bilden ska repeteras
background-position - anger bakgrundsbildens position

Bakgrundsbilder kan också användas på bl.a. boxar, tabeller, tabellrader och tabellceller.

Sömlös bakgrund

Det vanligaste är ju att man vill ha en s.k. "sömlös" bakgrund som bildar ett mönster i bakgrunden på sidan. Då skiver man så här i stilmallen:

Här anges sidans bakgrundsbild - då med med taggen body som selector:

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

Det är fiffigt att också ange en bakgrundsfärg som liknar färgen på bakgrundsbilden för att det ska bli snyggare när sidan laddas.:

body {
background-color: #FFFFFF;
background-image: url(bakgrundsbild.jpg);
}

Fixerad bakgrundsbild

Vill man att bakgrundsbilden ska vara fixerad när man scrollar innehållet på sidan lägger man till background-attachment: fixed i stilmallen.

body {
background-color: #FFFFFF;
background-image: url(bakgrundsbild.jpg);
background-attachment: fixed;
}

Repetera

Man kan också ange hur man vill att bakgrundsbilden ska repeteras. Att bakgrunden inte repeteras alls. Eller att den bara repeteras åt höger. Eller bara nedåt.

Vill man att bakgrunden inte ska repteras alls lägger man till följande i stilmallen:

body {
background-color: #FFFFFF;
background-image: url(bakgrundsbild.jpg);
background-repeat: no-repeat;
}

Bara åt höger (x-axeln):

body {
background-color: #FFFFFF;
background-image: url(bakgrundsbild.jpg);
background-repeat: repeat-x;
}

Bara nedåt (y-axeln):

body {
background-color: #FFFFFF;
background-image: url(bakgrundsbild.jpg);
background-repeat: repeat-y;
}

Placering

Med CSS går det att bestämma var man vill ha bakgrundsbilden placerad. Det gör man med egenskapen background-position.

horisontalt - left / center / right
vertikalt - top / center/ bottom

Så här skulle det kunna se ut:

body {
background-color: #FFFFFF;
background-image: url(bakgrundsbild.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}

• Ovanstående kod skulle placera bakgrundsbilden längst ner till höger på sidan. Inte så användbart kanske...

Man kan också ange placeringen i t.ex. pixlar eller procent:

body {
background-repeat: no-repeat;
background-position: 10px 10px;
}

body {
background-repeat: no-repeat;
background-position: 20% 20%;
}

• Positionerna anges i ordningen: horisontal placering, vertikal placering.
• Tänk på att om du anger placeringen i procent påverkas placeringen av upplösningen på besökarens skärm...
• Background-position går också att kombinera med: repeat-x eller repeat-y

 Till Toppen 

Komprimerad Deklaration: Background

I stället för att skriva ut alla koderna ovan kan man använda en s.k: Short hand declaration. Vill man ange bakgrundsegenskaper används: background.

Den här CSS-koden...

body {
background-color: #FFFFFF;
background-image: url(bakgrundsbild.gif);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
}

...tolkas på precis samma sätt som den här:

body { background: #FFFFFF url(bakgrundsbild.gif) repeat-x fixed top left; }