Bakgrund

I denna lektionen får du lära dig hur man ger ett element en bakgrundsfärg eller en bakgrundsbild.

Bakgrundsfärg

Att ge ett element en bakgrundsfärg är lika enkelt som att färga texten i det. Man använder egenskapen background-color, och värdet är färgens namn på engelska.

HTML - HyperText Markup Language
<p style="background-color: red;">Detta är en paragraf.</p> <p style="background-color: blue;">Detta är en paragraf.</p> <p style="background-color: lime;">Detta är en paragraf.</p> <p style="background-color: yellow;">Detta är en paragraf.</p>

Detta är en paragraf.

Detta är en paragraf.

Detta är en paragraf.

Detta är en paragraf.

Bakgrundsbild

Att ange en bakgrundsbild är nästan lika enkelt, dock finns det en hel del egenskaper man kan ange för att få det exakt som man vill ha det. I exemplen nedan kommer vi att använda följande bild:

En stjärna.

Bilden ovan är den som kommer att användas i nedanstående exempel. Dess filnamn är star.png.

Egenskapen background-image beskriver sökvägen till bilden, men värdet är inte bara sökvägen till bilden, utan den ska skrivas på följande sätt: url('sökvägen').

HTML - HyperText Markup Language
<p style="background-image: url('star.png');">Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text.</p>

Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text.

Som du ser så repeterar sig bakgrundsbilden både åt sidan (i X-led) och nedåt (i Y-led). Detta kan man styra med egenskapen background-repeat på följande sätt:

CSS - Cascading Style Sheets
/* Alla paragrafer ska ha denna bakgrundsbilden */ p{ background-image: url('star.png'); } /* Ge olika paragrafer olika värden för attributet background-repeat */ #paragraf1{ background-repeat: repeat-x; /* Repetera bara i sidled */ } #paragraf2{ background-repeat: repeat-y; /* Repetera bara nedåt */ } #paragraf3{ background-repeat: no-repeat; /* Repetera inte */ }
HTML - HyperText Markup Language
<p id="paragraf1">Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text...</p> <p id="paragraf2">Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text...</p> <p id="paragraf3">Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text...</p>

Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text.

Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text.

Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text.

Om man vill kan man ha en bakgrundsfärg och en bakgrundsbild samtidigt.

CSS - Cascading Style Sheets
#paragraf{ background-image: url('star.png'); background-color: blue; }

Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text. Detta är en paragraf med enmassa text.

Gå till nästa lektion, Kanter.