Homepage » Tutorials » HTML & CSS » Achtergronden met CSS

Achtergronden met CSS

Info
Door:	Rick	Moeilijkheidsgraad:
Geplaatst op:	09-02-2004	Reacties:	34(Bekijken)
Views:	42477 (gem. 17.6840 per week)	Log in om zelf te reageren
		Waardering:	9.3/10 (4 stemmen)

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}

Tot zover deze cursus CSS. Meer informatie over CSS vind je, naast onze artikelen, op de website van W3C.

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

«Tekst en CSS

34 reacties

MaikelH 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">

</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">

</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...

huub8 Geplaatst op 16-12-2007 om 11:40

Regular Zou iemand een compleet simpel html/css document voor mij kunnen schrijven met daarin de head de body enz maar ook het stukje code dat je nodig hebt om een witte recthoek met daaromheen een zwart kader als achtergrond te gebruiken.

5v3n Geplaatst op 13-12-2007 om 14:38

Regular @ webfox:

het staat hierboven maar mocht je het egt niet vinden:

body{background-attachement: fixed}

humorist Geplaatst op 25-11-2007 om 10:38

Regular Echt een super en super duidelijk tutorial!!
Door jou ken ik nu best goed CSS!!

Webfox Geplaatst op 26-06-2007 om 17:51

Regular

Ik heb een afbeelding als achtergrond en een css. Nou wil ik die afbeelding laten spreiden over het hele browsegebied en dat als je naar beneden scrollt de achtergrondafbeelding hetzelfde blijft (dus niet dat hij boven blijft staan).
Hij moet niet naar beneden "rollen" maar gewoon zo blijven. (Je ziet dus alleen de pagina bewegen, niet de achtergrond.)
Dit is mijn code:

#	Code
`1`	`background: #999 url(images/back.png) stretch no-repeat scroll;`

Peck Geplaatst op 25-05-2007 om 21:51

Moderator

Probeer eens

#	Code
`1 2 3 4 5 6`	`BODY { font-family: "MS Sans Serif"; font-size: 10pt; color: orange; background-color: url(image.gif) #FFCCCC; }`

Maar zorg er wel voor dat in de map waarin het bestand met dat stukje code in staat, ook "image.gif" staat h�. Ik denk dat dat niet het geval is.

lord floris9 Geplaatst op 25-05-2007 om 19:09

Regular body {
font-family: "MS Sans Serif";
font-size: 10pt;
color: #orange;
background-color: #FFCCCC;
background-image: url(image.gif);
}

Peck Geplaatst op 25-05-2007 om 19:03

Moderator Geef je code eens, dan weten we het meteen.

lord floris9 Geplaatst op 25-05-2007 om 18:58

Regular die background-image doet het bij mij niet... ik doe waarschijnlijk iets fout

Onbekend lid Geplaatst op 14-01-2007 om 12:31

Spammer Maar hoe kleur je nu een button?

iSpace Geplaatst op 27-09-2006 om 20:06

Regular mooie cursus :) maar hoe maak je met een link een achtergrond?

<html>
<head>
<title>Menu</title>
<style type="text/css">

</style>
<body>
<a href="home.html" target="gframe">Home</a>
<p>TrueSpace objecten</p>
<p>Links</p>
</head>

Gian Geplaatst op 03-02-2006 om 19:32

Regular Idd mooie les ik zou er alleen bij zette dat als je bv. je menu <a class="menu" href="buh.html">link</a>
dat je in css dan de class name kunt ge bruiken voor een specifiek stukje css...

Rogier Geplaatst op 30-12-2005 om 15:32

Regular Mooie les =) Wel een ding: je schrijft: attachment niet attachement. (heeft bij mij voor wat verwarring gezorgt)

Niek57K Geplaatst op 29-12-2005 om 12:03

Regular sorry skralan. maar dat werk helemaal niet krijg zo zelfs geen achtergrondkleur meer.

en nog iets ik zie hier kreten van blijdschap over firefox, nou ik ben er niet zo tevreden over want alles wat ik in IE goed heb staan komt in firefox niet zo best uit de verf en ook accepteerd die niet alle tags merk ik zoals dit Cafui Zaal Hofland met een boogje onder ui, wat in IE Caf� Zaal Hofland is en een afbeelding die in IE perfect geplaats word komt er in firefox niet in en dat met de zelfde bron ook krijg ik van die koeieletters te zien zodat ik de textgrote moet verkleinen. maar het zal wel aan mij liggen dat de ene browser de ander niet is. of is het soms de bedoeling dat men 2 html scripts maakt 1 voor IE en 1 voor firefox en die op de een of andere manier koppelt zodat het goed blijft uitzien egaal welke brower je dan ook opend.
http://home.quicknet.nl/qn/prive/niek56k/

Onbekend lid Geplaatst op 29-12-2005 om 09:58

Spammer

de oplossing van je probleem is:

#	Code
`1`	`<body style="background-position: absolute; left: 450px; top: 80px" background-image: url(embleem10.gif); background-repeat: no-repeat; background-color: #9CB0D1 color: FDFD00;>`

dit zou moeten werken

Niek57K Geplaatst op 29-12-2005 om 00:43

Regular CSS ik begin het te begrijpen. maar de onderstaande vraag heb ik nog niet opgelost

Niek57K Geplaatst op 02-12-2005 om 08:04

Regular ik kan doen wat ik wil of ik background-position: optie} absolute; left: 450px ; top: 80px" er voor of achter embleem.gif zet, en of ik nou pt,px,cm gebruik en of ik nou relatief, benoemd of absolute gebruik dat ding blijft links boven in mijn site staan dit heb ik er nu staan wat doe ik fout

<body background-position: optie} absolute; left: 450px ; top: 80px" background="embleem10.gif" style="background-repeat: no-repeat;" bgcolor="#9CB0D1" text="#FDFD00">

Ateng Geplaatst op 11-10-2005 om 10:04

Regular Dus als ik het goed begrijpt moet je eerst een foto uploaden voordat je m als background image wil gaan gebruiken. En hoe ga je een foto uploaden?

chrisseke Geplaatst op 06-09-2005 om 16:11

Regular Graag gedaan .Skarlan, ik hoop dat je me niet gaat haten...want ik heb er nog eentje ontdekt, nl. het is niet "background-attachement:" maar wel "background-attachment:" anders werkt het ook niet.

Afin we zijn er om elkaar te helpen en iedereen maakt wel eens fouten, ik heb trouwens al heel veel geleerd dankzij deze site en jouw tutorial. Bedankt !

Groetjes,

Onbekend lid Geplaatst op 06-09-2005 om 14:07

Spammer

idd, een kleine fout... bedankt voor de opmerking chrisseke...

verder ook op letten, als je meer dan 1 style definieert per element (dus tussen de accolades {} ), dan moet je de verschillende statements afsluiten met een kommapunt ";".

vb:

#	Code
`1 2 3 4`	`body { background-color: #FFCCCC[b];[/b] background-image: url(image.gif)[b];[/b] }`

chrisseke Geplaatst op 06-09-2005 om 12:53

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

background-image{
url(afbeelding.gif)}"

Probleem is dat hier in de syntax het ":" moet toegevoegd worden => background-image: {
url(afbeelding.gif)} dan werkt het wel !

kokx Geplaatst op 09-07-2005 om 19:06

Nieuwsposter mischien kun je die afbeelding alleen zien als hij in dezelfde directory zit

ImaginaryDream Geplaatst op 07-04-2005 om 22:00

Regular Ik wil een achtergrond en heb deze code in CSS gezet, wat doe ik fout?:

background-image{http://groups.msn.com/_Secure/0TAAjYx0Yq7!OzGPZZSEAcm9C7kjf JLMoQB0bDX8Hu34vLaJlLpipWQ5SU0lbME5EBQa o42XO*9kpqVPOqmM9LlLk0pBBq2mro8CMsQWO zEc8KSz6ZFcFA/slipknot.jpg?dc=4675517277498261994}

Ik heb de foto dus eerst geupload op internet en de link ervan in de code gevoegd.
Alvast bedankt.

Simone

derek Geplaatst op 19-02-2005 om 15:15

Regular Hoe kan ik ervoor zorgen dat een afbeelding precies 1 keer als achtergrond wordt gebruikt over het hele scherm?

SilenceR Geplaatst op 28-01-2005 om 10:11

Regular TOP tutorial... goed uitgelegd wat CSS is en wat je ermee kan :)

olv007 Geplaatst op 29-12-2004 om 15:45

Regular Dank u .skralan. Dit werkt!
(wist niet dat er hier geen vragen mochten gesteld worden. sorry... der staat er nog ergens eentje)

Onbekend lid Geplaatst op 29-12-2004 om 15:11

Spammer

vragen in het forum aub...

#	Code
`1`	`<body background="foto.jpg" style="background-repeat: no-repeat;">`

olv007 Geplaatst op 29-12-2004 om 14:56

Regular Ik heb een foto die ik als achtergrond wil gebruiken maar zonder dat hij zich oneindig keer herhaalt. Heb daarvoor deze code gebruikt:
<body background="foto.jpg" background-repeat: no-repeat>
Heb het ook al op meerdere andere manieren geprobeerd maar telkens weer komt die foto er oneindig keer op. Kan iemand mij daarbij helpen?

Blizt Geplaatst op 09-12-2004 om 19:34

Webmaster Wat snap je er niet aan Xylonite?

Diomedes Geplaatst op 18-11-2004 om 12:36

Regular uuh weet niet als je die later krijgt maar tables-borders zijn slecht kost te veel laadtijd hoe maak je toch zo een soort table achterop de tekst?? misschien heb ik er overheen gelezen of zo graag een bericht in mijn prive bedankt

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

Check je domein...

Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be