Achtergronden met CSS

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:58.855Reacties: 34(Bekijken)
  Log in om zelf te reageren
 Waardering:9.3/10 (4 stemmen)

Uitgebreide cursus CSS» Inleiding: wat is CSS? | Linked stylesheets | Embedded stylesheets | Inline stylesheets | Je eigen styles maken | Meer over styles | Tekst en CSS | Achtergronden met CSS




De achtergrond van je pagina instellen in HTML, zoals je kunt leren in onze afbeeldingencursus, is erg simpel, maar aan de andere kant zijn de mogelijkheden beperkt. de afbeelding begint altijd linksbovenin en gaat zich daarna herhalen. Met CSS zijn er veel meer opties. Bovendien kun je niet alleen de achtergrond van je pagina instellen, maar ook alleen die van een link, een alinea of tabel.

Een achtergrondkleur geef je op als background-color. Moet de achtergrondkleur rood worden, dan doen we dus zo:

body{
background-color: #ff0000}

of natuurlijk

body{
background-color: red}

Dat moet wel lukken. Een afbeelding is iets lastiger, dat werkt zo:

background-image: url(afbeelding.gif)

Het mooie van CSS is dat je kunt opgeven of en zoja hoe de achtergrondafbeelding zich moet herhalen. Dat doen we met body{background-repeat: optie}. Dit zijn de opties:

Waarde Gevolg
repeat herhaal alles
repeat-x herhaal horizontaal
repeat y herhaal verticaal
no-repeat geen herhaling

Ook mooi is dat je kunt zeggen of de afbeelding stil moet blijven staan of herhaald moet meebewegen als je gaat scrollen. Meebewegen geven we aan met

body{background-attachement: scroll}

Stil blijven staan krijg je met

body{background-attachement: fixed}

Als laatste is het nog mogelijk om precies op te geven waar t.o.v. de linkerbovenhoek moet beginnen. Dat doen we met body{background-position: optie}. Hieronder zie je de opties:

  • relatief(0%, 0%, dit is de linkerbovenhoek)
  • absoluut(cm, px of pt t.o.v. de linkerbovenhoek
  • benoemd(bottom, top, left, right.) Bottom, right wordt dus rechtsonderin.

We zeiden het al, het hoeft niet per se om een hele afbeelding te gaan. Ook een link is mogelijk. Zo kun je het dus ook voor elkaar krijgen om een rode link een gele achtergrond te geven als je er met de muis overheen beweegt. Dat doen we zo. Eerst geven we de style van een gewone link op:

a:link{
font-size: 11pt;
color: red;Let op: geen font-color gebruiken
background: none}

Dan de style van de link als de muis erover heen gaat

a:hover{
font-size: 11pt;
color: red;
background: yellow}

Kom je er niet helemaal uit, of heb je nog vragen? Stel die dan in ons forum!

«Tekst en CSS

34 reacties
Ciagraprofessional54vjn Geplaatst op 20-04-2010 om 18:02
 

Regular
fijne tut.
heel erg bedankt
Vkaz Geplaatst op 31-01-2009 om 13:14
 

Regular
@robin

bedankt
Robin18 Geplaatst op 22-09-2008 om 16:20
 

Regular
Een background image maak je als volgt:
Body {
background-image:map/abeeldingen.extencie
}

En wrm sluit je de STYLE af terwijl je daarna verder gaat met CSS en typ je nog iets vaags en sluit je daarna je HEAD

----orgineel-----

<html>
<head>
<title>Menu</title>
<style type="text/css">
<!--
p {font-size: 11 pt;
font-family: Arial, Swiss, Helvetica;
color: #ffffff;
margin-left:10%;
margin-right:10%;
margin-bottom:2%;
margin-top:0%;
background-color:green

}
-->
</style>

body{
background-color:red}
<a href="home.html" target="gframe">Home</a>
<p>fun</p>
<p>Links</p>

</head>
maar het werkt niet
mumbl3r Geplaatst op 18-08-2008 om 15:23
 

Regular
het klopt van geen kanten, ik kan geen background color/image met css maken.. '-.- kan iemand me helpen waar ik het moet zette enz? ik doe het zo:

<html>
<head>
<title>Menu</title>
<style type="text/css">
<!--
p {font-size: 11 pt;
font-family: Arial, Swiss, Helvetica;
color: #ffffff;
margin-left:10%;
margin-right:10%;
margin-bottom:2%;
margin-top:0%;
background-color:green

}
-->
</style>

body{
background-color:red}
<a href="home.html" target="gframe">Home</a>
<p>fun</p>
<p>Links</p>

</head>
maar het werkt niet
JSOweb Geplaatst op 23-04-2008 om 19:24
 

Regular
Bedankt voor de ongelooflijke tutorial. Nog veel leren - maar het helpt me wel op weg...

Pagina 1 2 3 4 5 6 7 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder