Bakgrundsbilder och CSS

CSS är mycket väl lämpat för att arbeta med bakgrundsbilder och du kan på ett mycket snabbt sätt ändra egenskaperna och bilderna för flera av undersidorna på hemsidan på en och samma gång. Du kan genom klasser jobba med flera olika varianter inom samma stilmall, eller ha en grundmall och specificera undantag på respektive undersida – med CSS kan du frambringa samma formatering på en mängd olika sätt beroende på vad du föredrar. Vad du föredrar beror ofta på vad du brukar göra och tycker är enklast att göra men kan också vara relaterat till vad som är mest effektivt och går snabbast att ladda.

När det gäller bakgrundsbilder finns det en del alternativ som du kan använda. Standard är att bakgrundsbilden upprepas flera gånger, vilket gör att en liten bild kan fylla sidan med ett fint mönster utan att ta knappt någon plats alls. Om du vill ha en större bild, till exempel ett fotografi, vill du säkert inte upprepa bilden utan endast ha den en gång. I sådant fall skriver du följande kod i css-mallen:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: no-repeat;

}

där “fotoavminfinahund.jpg” är den bild som du vill ha som bakgrund. Om du vill att bilden ska repeteras flera gånger om skriver du helt sonika

body {

background-image: url(fotoavminfinahund.jpg);

}

utan att specificera upprepning eller inte.

Du kan med css specificera närmare hur du vill ha bakgrunden, till exempel att du vill att bilden ska repeteras endast åt höger, men inte nedåt, i x-led men inte i y-led. I sådant fall skulle koden bli:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: repeat-x;

}

På samma sätt, om du vill att bilden ska repeteras nedåt, men inte till höger, ändrar du bara till “repeat-y”:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: repeat-y;

}

En annan praktisk funktion är att centrera bakgrundsbilden. Då använder du dig av “background-position”. I det fall du vill ha bilden centrerad i båda led blir koden:

body {

background-image: url(fotoavminfinahund.jpg);

background-position: center center;

}

Leave a Reply

Your email address will not be published. Required fields are marked *