Att ändra bakgrund: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) |
||
| Rad 109: | Rad 109: | ||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[ | [[Boxmodellen]] | ||
Versionen från 20 januari 2015 kl. 23.08
Vi ska ta och prova på hur man kan använda sig av CSS för att ange lite intressantare bakgrunder på sin webbsida.
Ändra bakgrundsfärg
För att ändra bakgrundsfärg använder man sig av egenskapen background-color. Som värde till egenskapen sätter anger man färg på något av de sätt som vi redovisade i färg-aktiviteten. Om vi vill sätta blå bakgrund på hela sidan skulle vi kunna göra så här:
body {
background-color: blue;
}
Skulle vi vilja ha en mörkare blå, kanske med blått satt till 50 % kunde vi göra så här istället.
body {
background-color: #000080;
}
Ändra text-/förgrundsfärg
Kanske du tycker att det blev lite svårläst med svart text på mörkblå bakgrund? I så fall måste du även ändra textfärgen. Det gör man med egenskapen color. Självklart tar även den alla de varianter som finns för att ange färger. Låt oss säga att du vill ha vit färg, då kunde du göra så här:
body {
color: white;
}
Man kan förstås sätt flera egenskaper samtidigt i varje CSS-regel. Så om vi både vill sätta bakgrundsfärg och textfärg, skull det kunna bli så här:
body {
background-color: #000080;
color: white;
}
Det spelar ingen roll i vilken ordning du sätter egenskaperna, så länge det inte är någon egenskap som skriver över en annan. Ett exempel på det kan vara så kallade samlingsegenskaper, eller kortegenskaper, som sätter flera egenskaper med ett enda egenskaps-kommando.
Att sätta en bakgrundsbild
Vill du göra din sida lite roligare, kan det vara trevligt att ange en bild som bakgrund. Kom dock ihåg att bilder lätt kan göra sidan mer svårläst. Se därför till att använda bilder som har bra kontrast gentemot resten av innehållet!
För att kunna sätta en bakgrundsbild måste du veta URL:en till den plats där bilden finns. Låt oss säga att i vårt fall är det en fil som heter bakgrund.jpg som vi vill visa. Låt oss även säga att bilden ligger i samma katalog som det HTML-dokument som vi jobbar med. För att ange bakgrundsbilden skulle vi då kunna skriva så här:
body {
background-image: url("bakgrund.png");
}
Vi kan ta och sätta in detta i en exempelsida och se hur det blir att se ut, t.ex. så här:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bakgrundsdemo 1</title>
<style>
body {
background-image: url("bakgrund.png");
}
</style>
</head>
<body>
<h1>En bakgrundsdemo</h1>
</body>
</html>
Här kan du se resultatet.
Eftersom det var en rätt liten bild, så kommer bilden att upprepas ett antal gånger såväl horisontellt som vertikalt. Det finns lite olika sätt vi kan styra om vi vill ha detta beteende eller ej.
Sätta storlek på en bakgrundsbild
Bakgrundsbildens storlek sätt med egenskapen background-size. Denna kan ta flera olika parametrar. Vi tar och går igenom dem...
Måttenhet
Man kan använda alla CSS-måttenheter tillsammans med background-size. Bilden kommer då att sättas till den storlek som man anger. Om den angivna storleken skiljer sig ifrån bildens verkliga storlek, så kommer webbläsaren att skala om bilden till den angivna storleken.
Man kan ange flera, samtidiga värden till denna egenskap. Vi går igenom vad som händer med olika värden.
Om vi enbart anger en storlek.
body {
background-image: url("bakgrund.png");
background-size: 400px;
}
Jämför exempel1 med exempel2. I det första fallet har vi en oskalad bild, medan vi i det andra fallet har en bild som skalats om så att bredden är 400px. Då vi enbart anger ett värde är det alltid bredden som anges och bildens höjd skalas om proportion i till den angivna bredden. Detta gör att bilden inte blir att uttänjd och konstig ut. Det är sällan man vill skala om bilder så de inte har samma skal-proportioner.
Om vi anger två storlekar.
body {
background-image: url("bakgrund.png");
background-size: 400px 200px;
}
Jämför exempel2 med exempel3. I detta fall anger vi såväl bredd som höjd. För att demonstrera detta har jag satt "konstiga" proportioner på bilden, vilket gör att den tänjts ut.
Som specialfall kan man sätta nyckelordet auto istället för en av storlekarna. Då anger man att bilden ska skalas i proportion till den andra angivelsen. Om vi t.ex. vill sätta en bilds höjd och hålla dess proportioner i bredd, kan vi ange:
body {
background-image: url("bakgrund.png");
background-size: auto 200px;
}