Bakgrundsbilder

1. Infoga Bakgrundsbild

Genom att i selectorn body ange egenskapen background-image, infogar vi vår bakgrundsbild på sidan. Till detta anger jag även själva bilden (ex. leaf.gif). Se mer i avsnitt 5 i denna del, hur koden som helhet kan se ut.

När det gäller bakgrundsbilder, kan vi bestämma lite olika egenskaper för dem. Vi kan bestämma hur många de skall vara, om de skall upprepa sig tills de täcker hela bakgrunden eller ej, vart de skall vara placerade m.m.

2. Låta den upprepas eller inte?

Genom egenskapen background-repeat: kan vi ange om bilden skall upprepa sig eller inte. Vi kan välja mellan värdena: repeat, repeat-x, repeat-y och no-repeat. Med repeat anger vi att bilden skall upprepa sig själv till den täcker bakgrunden. Med repeat-x resp. -y anger vi att bilden enbart skall upprepa sig efter x-axeln alternativt y-axeln. Slutligen ger no-repeat endast en bild i bakgrunden.

3. Placera in den horisontellt/vertikalt

Denna bild (eller bilder om vi valt repeat-x eller repeat-y) kan vi också placera in på skärmen där vi vill att den skall vara. Med background-position: top left; har vi placerat bilden längst upp till vänster på sidan. Med den första positionen (här top) placeras bildens vertikala läge på sidan och den andra positionen (här left) reglerar dess horisontella placering. Den första positionen kan också ha värdena center och bottom, samt den andra positionen värdena center och right. Värdena kan anges både i procent och cm.

4. Ligga fast eller scrolla med?

Vi kan också ange om bilden skall följa med när vi "scrollar" eller om den skall ligga fast. Egenskapen vi skriver är background-attachment. och dess värden kan vara fixed eller scroll. Denna funktion fungerar som bgproperties="fixed" i HTML. Med fixed ligger bakgrundsbilden stilla när jag scollar. Vid scroll följer bilden med texten.

5. Förslag på kod

Här följer ett förslag till kod. Bakgrundsfärgen är vit och bilden heter leaf.gif. Det blir en enda bild som är placerad 30% ifrån toppen och 35% från vänsterkanten inåt i skärmen. Dessutom skall den ligga fast när vi scrollar texten:

<html> <head> <title>Blad och Scroll</title> <style type="text/css">  </style> </head> <body> Text och bilder... </body> </html>

Om din webbläsare har stöd för denna funktion, kommer bakgrundsbilden att vara placerad uppe åt vänster och kommer att ligga fast när du scrollar.

6 Infoga bakgrundsbild från extern webbplats

Ibland kan vi ha fina bakgrundsbilder på andra externa webbplatser, som vi inte vill flytta därifrån. Då behöver vi inte spara hem dem till oss och ev. byta namn, utan vi kan i CSS hänvisa till webbplatsen och tala om vad det vi hänvisar till har för namn.

<html> <head> <title>Bild från extern webbplats</title> <style type="text/css">  </style> </head> <body> Text och bilder... </body> </html>

Så kan koden se ut för detta ändamål.

7. Bakgrundsbild för delar av texten

Med följande kod lägger in en bakgrundsbild åt en del av texten:

<style type="text/css">  </style>

<span class="pass2">Bakgrundsbilden placeras nu in i textavsnittet på sidan, det som ingår inom dessa taggar...</span>





kontakt	© Stefan Dahlén	Tisdag 7:e oktober 2008