kaxigt.com

Med CSS3 background-origin border-box padding-box och content-box medges större kontroll över egenskaperna för background vilket innebär att det öppnas nya möjligheter att designa en sida.

CSS3 tillåter nämligen multipla bakgrundsbilder på ett element.

Background origin

Det spelar ingen roll om det handlar om ett block, box, eller en paragraf så länge man kan lägga till en bakgrund till selektorn (html-elementet).

Det här möjliggör då en större flexibilitet när det gäller placeringen av en bakgrundsbild. Man använder egenskapen background origin för att bestämma hur bakgrundspositionen för en bakgrund i en specifik box ska bete sig.

Background origin har tre värden; border-box, padding-box och content-box där border-box är default (grundläget).

Väljer du då till exempel att ange just värdet border-box så kommer denna att positioneras i ett relativt läge dikt emot det vänstra övre hörnet medan padding-box däremot lägger sig i ett relativt läge i kant med paddingen uppe i det vänstra övre hörnet.

Med content-box menas att bakgrunden börjar från det övre vänstra hörnet av innehållet (content).

Background-clip

Egenskapen för background-clip används för att bestämma huruvida bakgrunden ska utvidgas mot bordern eller ej. Även här är defaultvärdet (grundläget) border-box och det innebär att bakgrunden kommer att utvidgas.

Sätter du däremot värdet padding-box kommer den inte att göra det. Om du väljer content-box så kommer bakgrunden endast att utvidgas inuti den avgränsade delen ”content”.

Se bilden och jämför skillnaden mellan border-box och padding-box. I den övre raden är background-clip ställd som border-box, och den undre raden som padding-box.

Bild och credits till css3.info.com.

Background-size

Med CSS3 har man faktiskt möjlighet att kunna specificera storleken på en bakgrundsbild.

Här kan du ange bildens storlek höjd/vidd i såväl pixlar som i procent. Väljer du procent kommer storleken på bilden att vara relativ i förhållande till höjden och vidden som du har angett i background origin.

Det bästa med denna funktion är att du kan återanvända bilden i olika sammanhang men även med noggrannare precision låta bilden fylla ut ett större område.

De webbläsare som klarar av att implementera detta är för närvarande följande:

Firefox -moz-background-size
Opera från version 9.5 -o-background-size
Safari från version 3 -webkit-background-size
Konqueror -khtml-background-size

Du kan även välja på att lägga in funktionen i en class:

.bgsize {
background: url (http://dindomän.com/images/logo.gif); 
-webkit-background- size : 150px 50px ;
-webkit-font-size: 150px 50px;
 -khtml-background- size : 150px 50px ;
-KHTML-font-size: 150px 50px;
-o-background- size : 150px 50px ;
-o-font-size: 150px 50px;
background- size : 150px 50px ;
font-size: 150px 50px;
background-repeat : no-repeat ;
padding : 10px 5px 5px 10px ;
border: 1px solid #ccc ;
 }

Multipla bakgrunder

En intressant effekt är att kunna använda flera bakgrunder på samma html-element. Hur är det då möjligt? Egentligen är det inte alls så svårt. Vi ska börja med att kika på en enkel kod:

div {
background-image: url(images/bild1.jpg), url(images/bild2.jpg);
}

Som du ser så separerar vi varje bakgrundskälla med ett kommatecken. Nu ska vi också definiera våra bakgrundspositioner och det gör vi så här:

div {
  background-image:     url(images/bild1.jpg),  url(images/bild2.jpg);
  background-position:  top left,         bottom right;
  background-repeat:    no-repeat,      repeat-y;
  }

Koderna läses in av webbläsarna på följande vis:

background-image:     url(images/bild1.jpg),  url(images/bild2.jpg);
background-position:  top left,         bottom right;
background-repeat:    no-repeat,        repeat-y;

Det är fullt möjligt att använda både tre och fyra bilder om man vill.

div {
 background-image: url(images/bild1.jpg), url(images/bild2.jpg), url(images/bild3.jpg);
 }

Och så här ser koden ut om du stoppar in dem i en selector:

.multiplebackgrounds{
height : 150px ; height: 150px;
width : 270px ; width: 270px;
padding : 40px 20px 20px 20px;
background: url ( top.gif ) top left no-repeat,
url ( bottom.gif ) bottom left no-repeat,
url ( middle.gif ) left repeat-y;
}

Exempelkoder hämtad hos http://designshack.co.uk