Bilder och Bakgrunder
Med background kan man stilsätta bakgrunden på olika element. Det enkla sättet är att helt enkelt ange attributet background-color och sen ett färgvärde. Man kan också lägga in en bild som bakgrund och då använder man attributet background-image. Det finns också en hel del attribut för att se till att bilden hamnar som man vill. Man kan ange position med background-position och ange värdet i X- och Y-positioner i de vanliga enheterna eller helt enkelt med nyckelord som left top, right center, center bottom o.s.v. Om man bara anger ett nyckelord så blir det andra automatiskt center. Sen finns det background-repeat som anger om bakgrundsbilen ska upprepa sig, vilket led den isåfall ska upprepa sig eller om den helt enkelt inte ska upprepa sig. Detta görs med värdena: repeat (som är defaultvärde), repeat-x, repeat-y och no-repeat. repeat-x är helt enkelt att bilden upprepar sig på den horisontella axeln medans repeat-y är på den vertikala axeln. Repeat är i båda axlarna och no-repeat anger att den inte ska upprepa sig alls. Det finns också ett attribut som heter background-attachment och vad man kan göra med det är att ange att en bild ska röra sig så att den alltid syns på sidan. Alltså så ligger den på samma position i webläsarens fönster även om man scrollar på sidan. Detta attribut kan ta två värden där scroll är standardvärde och hur bilder brukar bete sig, alltså att dom scrollar med sidan. Det andra värdet är fixed och då ligger bilden kvar i webläsarfönstret om man scrollar, alltså med fixed menas att positionen är fixerad i webläsarfönstret.
Redan på denna sida finns några exempel på alla dessa metoder för att stilsätta bakgrunder. <body> elementet har t.ex. en bild som upprepar sig båda leden (det finns mellanrum mellan footer och article om det syns dåligt). Detta är en bild som är gjord för att vara upprepande, något som är väldigt vanligt för texturer till spel eller 3d-modeller. Bilden i fråga ser ut så här för sig själv:
. Förutom att det finns en upprepande bakgrund finns det i <article> elementet en liten logotyp för W3C som har attributet background-attachement satt till fixed och då följer med när man scrollar. Den har background-position:center right;. Notera att den ligger i <article> elementet men dess position i fönstret är fixerad så om man skulle scrolla så att <article> elementet inte skulle finnas i fönstret skulle bilden inte synas.
<h1> element med en angiven bakgrundsbild.
Nedan är en lista där <li> elementen har samma bild som <h1> elementet ovan.
- Första
- Andra
- Tredje
- Fjärde
- Femte
Om man inte anger annat så positionerar element sig automatiskt beroende på om de är ett block element (som skapar radavbrott innan och efter och inte tillåter andra element att ligga vid sidan om sig) eller ett inline element (som inte skapar radavbrott och låter andra element ligga vid sidan om sig). Om man anger att ett elements position är absolute så ignorerar den det normala flödet på sidan och det normala flödet ignorer elementet. Detta betyder att element kan komma att ligga ovanför eller under andra element och man måste se till att ange hur detta ska skötas. Om man bara vill pressa ett element åt sidan så kan man använda float. Float pressar ett element åt antingen vänster eller höger (som man anger med left eller right) så långt den kan inom ens föräldraelement. Om två element blir floatade åt vänster hamnar de efter varandra med det element som ligger först i koden längst till vänster. Om det andra elementet inte får plats så hamnar det under och så långt till vänster som möjligt. Vad som dock är intressant är att content som får plats brevid detta element lägger sig där även om elementet är ett block element. Det fortsätter helt enkelt flöda runt. Bilden med rosa hjärtan har blivigt floatad till vänster och denna text ligger i ett enkelt <p> element. Som synes så flödar texten runt bilden. Dock så hamnar nästa content väldigt nära men det går att lösa enkelt genom att ge det floatade element en margin (bilden har en margin-right på 15px). Om man inte vill att något ska flöda runt floatade element kan man använda clear. Värdet på clear anges med left, right eller both. Vad den gör är helt enkelt att den inte tillåter elementet att flöda med andra element åt den riktningen man anger.
Ett <h2> element med clear:right;
Ett <h3> element med clear:left;
Ett <h1> element utan något clear attribut alls. Flödar efter <h3> elementet.
Nu är dessa element lagda i den ordningen som de kommer i. I just detta fall om <h2> elementet skulle kommit efter något av de andra skulle det hamna efter bilden eftersom den skulle följa det normala flödet på sidan och eftersom header elementen är block element så betyder det radavbrott och då skulle den hamna efter det andra headerelementet (alltså under) som, eftersom den har clear värde som pressar ner den, ligger under bilden.