#Bakgrundsbilder och texturer

Med bilder kan man få sin webbplats att sticka ut. Låt oss kika lite på hur vi kan använda bakgrundsbilder och texturer i CSS.

#Bakgrundsbilder

Genom att använda bakgrundsbilder kan du uppnå effekter som sticker ut. Följande exempel visar hur du kan definera bakgrundsbilder i CSS.

Bakgrundsbilder i CSS.

Bilderna i exemplet är ritade png-bilder men du kan naturligtvis lika gärna använda fotografier som bakgrund. Det fungerar på samma sätt. Exemplets bilder från Openclipart (SVG-bilder) och är redigerade i verktyget Inkscape. Du kan läsa mer om det i följande artikel.

Skapa bilder för din webbplats med SVG.

Här följer ett exempel på positionering av en bakgrundsbild.

Rent designmässigt går det att skapa rejäla effekter med foton (och ritad grafik). Exakt hur man gör, får vara ett ämne i en annan kurs. Här nöjer vi oss med att visa hur vi rent praktiskt placerar ut dessa objekt.

#Texturer

Texturer är små grafiska objekt som går att upprepa sida vid sida, tex som bakgrundsbild på en webbsida. Följande exempel visar ett sådant användningssätt.

Texturer som bakgrund i en webbsida.

Rätt använt kan texturer användas för att uppnå önskade effekter och göra att en webbsida sticker ut.

#Revision history

  • 2018-06-13: (A, lew) Första versionen.

Document source.