CSS bakgrund

Med CSS egenskapen "background" kan man ange bakgrundsfärg eller bakgrundsbild på ett element.

<h1>Rubrik</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget quam tellus. Phasellus in elit leo, non ullamcorper ligula. Fusce porttitor, dui eget euismod sagittis, risus purus tincidunt dolor, semper semper orci felis vel urna. Vestibulum faucibus blandit consectetur. Donec gravida tempor sodales. Praesent in eros lorem, vel auctor massa. Curabitur vitae dolor eu lorem commodo volutpat. Maecenas laoreet accumsan egestas. Nulla facilisi. Maecenas leo neque, tempor non mollis et, mattis sit amet nisl. Nulla auctor, turpis vel molestie mollis, diam velit condimentum urna, ut consectetur urna nunc sed nisl. Curabitur luctus ligula vitae nisi sagittis gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam hendrerit enim a neque ullamcorper viverra. In quis magna mi. Vivamus laoreet diam at justo imperdiet eget ullamcorper lorem consectetur. Suspendisse vel felis eget risus cursus rhoncus a quis diam. Nunc sollicitudin massa vel leo mollis bibendum. Duis in lacus quam, in lacinia nulla.</p>

Bakgrundsfärg

CSS egenskapen "background-color" bestämmer vilken bakgrundsfärg ett element ska få.

CSS

body {background-color:green;}
h1 {background-color:#FFFFFF;}
p {background-color:rgb(100,100,100);}

Läs mer om färger i HTML color

Bakgrundsbild

CSS egenskapen "background-image" bestämmer bakgrundsbild för ett element.

CSS

body {background-image:url('stripe.jpg')}

Bilder kommer automatiskt att repeteras både vertikalt och horisontellt över hela sidan.

En bild kan repeteras vertikalt, horisontellt eller inte alls

CSS egenskapen "background-repeat" bestämmer hur en bakgrundsbild ska repeteras. Värdet "repeat-y" gör så att bilden repeteras vertikalt.

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:repeat-y;
}

Värdet "repeat-x" gör så att bilden repeteras horisontellt.

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:repeat-x;
}

Värdet "no-repeat" gör så att bilden inte repeteras alls.

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:no-repeat;
}

En bild kan placera mitt på sidan

En bilds placering går att stura med egenskapen "background-position".

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center;
}

För att detta ska fungera i Mozilla Firefox eller Opera måste egenskapen "background-attachment" ha värdet "fixed"

Placeringen går att styra med ord

Bildens placering går att styra med orden "top" "center""bottom" samt "left" "center" "right". Först anges bildens lodräta placering och sedan bildens horisontella

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:bottom center;
}

Placeringen går att styra med px och %

Bildens placering går även att styra med måttenheterna px och %. I bägge fallen anges hur långt ifrån det övre vänstra hörnet bilden ska placeras.

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:10px 40px;
}

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:80% 90%;
}

För att dessa exempel ska fungera i Mozilla Firefox eller Opera måste egenskapen "background-attachment" ha värdet "fixed"

En bild kan fixeras eller scrolla med webbsidan

Bakgrundsbilder kan båda följa med när webbsidan scrollas eller vara fixerade

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:no-repeat;
   background-attachment:scroll;
}

CSS

body	{
   background-image:url('stripe.jpg');
   background-repeat:no-repeat;
   background-attachment:fixed;
}

Samlingsegenskap för bakgrund

Med egenskapen "background" är det möjligt att ange alla bakgrundegenskaper på en och samma gång.

Egenskaperna måse anges i ordningen: background-color, background-image, background-repeat, background-attachment, background-position.

CSS

body {
   background: green url('stripe.jpg') no-repeat fixed center;
}

Det är viktigt att egenskaperna anges precis samma ordning som i exemplet ovanför för att det ska fungera.

Notera att det går bra att utelämna en eller flera egenskaper. Då kommer den utelämnade egenskapen att bli satt till standardvärdet eller till ett värde som redan angivits.

CSS

body {
   background:lightblue;
}