Bakgrund

Sätta bakgrunder med CSS

Bakgrunder kan appliceras på nästan alla HTML-element, och är relativt enkelt.

Vanligast är det att man sätter bakgrunden på en div eller text. Det kan gälla en header, sidfot, knapp med mera. Vi använder oss av background i css för att bestämma bakgrund. Sedan kan vi skriva en färgkod eller bildadress för att visa bakgrunden.

Bakgrundfärg

<div class="ettRosaBlock">

</div>
.ettRosaBlock{
  background: #fd65e4;
}

Bakgrundsbild

<div class="ettBlock">

</div>
.ettBlock{
  background: url(bild.jpg);
}

Bakgrundsfärg och bakgrundsbild

<div class="ettBlock">

</div>
.ettBlock{
  background: #fd65e4 url(bild.jpg);
}

Upprepa bakgrundsbild

Du kan välja att upprepa bakgrundsbilden vertikalt, horisontelt, eller inte alls. Upprepning åt båda hållen är förinställt om du inte ändrar något. Attributet kan läggas efter bildadressen, eller läggas som ett nytt attribut.

.block1{
  background: url(bild.jpg) repeat-y;
}

.block2{
  background: url(bild.jpg) repeat-x;
}

.block3{
  background: url(bild.jpg) no-repeat;
}
.block1{
  background-repeat: repeat-y;
}

Ändra position på bakgrundsbild

Du kan bestämma hur bakgrunden ska ligga, antingen till vänster (förinställt), höger eller centrerat. Attributet kan läggas efter tidigare attribut repeat, eller som ett nytt attribut.

.block1{
  background: url(bild.jpg) no-repeat left;
}

.block2{
  background: url(bild.jpg) no-repeat right;
}

.block3{
  background: url(bild.jpg) no-repeat center;
}
.block1{
  background-position: left;
}

Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus