Hantera bakgrundsbilder
I de flesta webblayouter används bakgrundsbilder på ett eller annat sätt. Antingen som mönster eller som motiv. En Photoshop-skiss kan t.ex. delas upp i mindre bakgrundsplattor som sedan placeras i sidlayoutens olika sektioner (div-element).
Hantering och placering av bakgrundsbilder i en div (eller andra element) sker med CSS. Ett av flera moment du måste behärska för att lyckas med struktur och sidlayout på webben.
Lägga ut bakgrundsbilden
Bakgrundsbilder anges med deklarationen background-image:url(). Innanför parentesen skriver du sökvägen till bilden. Förinställt är att bilden upprepar sig själv och läggs ut som ett mönster, med utgångspunkt från elementets övre vänstra hörn. Om bildens dimensioner är desamma som elementets, syns inte repetitionen alls.
Har du däremot en mindre bild och endast vill en upplaga av bilden i elementet (eller i body för hela sidan), måste du ange deklarationen background-repeat:no-repeat. Den ensamma upplagan av bilden läggs då i övre vänstra hörnet av elementet. Båda dessa deklarationer kan också erhållas genom en sammandragen CSS-kod.
#element { background:url(bilden.gif) no-repeat }
Placera den ensamma bakgrunden
En ensam bakgrundsbild kan positioneras ganska exakt inuti ett element med egenskapen background-position. Med de tre värdena left, center och right styr du den vågräta positionen, medan top, middle och bottom låter dig styra den vertikala positionen. Ett element är ju alltid rektangulärt, vilket gör det enklare att visualisera.
Genom att ange både vågrät och vertikal position, får du bakgrunden dit du vill. Du kan även ange vågrät/vertikal position med antal pixlar eller procent. Placeringen sker då från utgångläget i övre vänstra hörnet där värdet är 0 0 (noll noll).
#element1 { background-position:right top }
/* Placeras 100% åt höger, 0% nedåt */
#element2 { background-position:100px 300px }
/* Placeras 100px åt höger, 300px nedåt */
Om bakgrunden förskjuts längre åt höger/nedåt än elementets dimensioner tillåter, så beskärs de överskjutande delarna av bilden och blir osynliga.
Mönster eller motiv?
Alla bilder är inte lämpade att använda som mönster. Ett tydligt tecken på det är om upprepningen av bilden ser ut som ett lapptäcke där varje bilds kanter framträder alltför väl.
En typisk mönsterbild ska gärna ha just mönsterpassning och verkligen passa ihop liksom ett pussel kant i kant med sina ”tvillingar”. Ungefär som en tapet med mönsterpassning. Vem vet, det kanske kan bli ämne för ett annat inlägg längre fram – hur man skapar sömlösa mönster.
2009-06-04 (13:48)
Webbdesign och webbutveckling
Relaterade inlägg
Inga relaterade inlägg finns.
Dela med dig: