Att ändra bakgrund: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| Rad 43: | Rad 43: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
body { | body { | ||
background-image: url("bakgrund. | background-image: url("bakgrund.png"); | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Vi kan ta och sätta in detta i en exempelsida och se hur det blir att se ut, t.ex. så här: | |||
<syntaxhighlight lang="html5"> | |||
<!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> | |||
</syntaxhighlight> | |||
[http://exempel.webbling.se/bakgrund1.html Här] kan du se resultatet. | |||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[Introduktion till id och klasser]] | [[Introduktion till id och klasser]] | ||
Versionen från 18 januari 2015 kl. 22.48
Vi ska ta och prova på hur man kan använda sig av CSS för att göra 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.