Handleiding HTML - Stijleigenschappen voor kleur en achtergrond

Eigenschappen voor kleur en achtergrond

Tot de eigenschappen voor kleur en achtergrond behoren: color, background-color, background-image, background-repeat, background-attachment, background-position en background.

Bij de voorbeelden van de verschillende eigenschappen is een afbeelding opgenomen, waarop te zien is hoe de weergave zou moeten zijn. Klik op de afbeelding en bekijk in een nieuw venster of de browser het voorbeeld (correct) ondersteunt.

color Met de color eigenschap wordt de voorgrondkleur bepaald.

Mogelijke waarden zijn een kleurnaam en een RGB-waarde.
Voor het definiëren van de kleur zie Kleuren in HTML/CSS.

Om problemen bij de weergave te voorkomen, is het verstandig om de eigenschappen color en background-color altijd gecombineerd te gebruiken.

De beginwaarde wordt bepaald door de (instellingen van de) browser.

De eigenschap kan gebruikt worden voor alle elementen en wordt geërfd.

De opbouw is:

color: waarde

In het volgende voorbeeld van de color eigenschap is een kleurnaam gebruikt, maar uiteraard kan ook een kleurwaarde (#RRGGBB) opgenomen worden.
`<H1 STYLE="color: red;">De tekst is rood</H1>`

background-color Met de background-color eigenschap wordt de achtergrondkleur bepaald.

Mogelijke waarden zijn een kleurnaam, een RGB-waarde en transparent.
Voor het definiëren van de kleur zie Kleuren in HTML/CSS.

Voor een element met een transparante achtergrond wordt de achtergrondkleur weergegeven van het parent element.
Een achtergrondkleur geldt voor het rechthoekige gebied, dat gevormd wordt door de inhoud van het element en een eventuele padding. Een beschrijving is te vinden bij de HTML en elementen.
Om problemen bij de weergave te voorkomen, is het verstandig om de eigenschappen color en background-color altijd gecombineerd te gebruiken.

De beginwaarde is transparent.

De eigenschap kan gebruikt worden voor alle elementen.
Hoewel de eigenschap niet wordt geërfd, zal voor een element waarvoor de background-color eigenschap niet is gebruikt, door de beginwaarde transparent toch de achtergrondkleur worden weergegeven van het parent element.

De background-color eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. Door Netscape Navigator 4 wordt bij de waarde transparent ten onrechte niet de kleur van het parent element gebruikt, maar wordt de standaard achtergrondkleur van de browser gebruikt.

De opbouw is:

background-color: waarde

In de volgende voorbeelden wordt de background-color eigenschap gedemonstreerd.
Bij elementen op blokniveau moet de achtergrond over het hele rechthoekige gebied van het element (de box) doorlopen. Bij Netscape Navigator 4 gebeurt dit niet correct, zie voor een toelichting de beschrijving van de box.
`<H2 STYLE="color: black; background-color: yellow;">De achtergrond ... geel</H2>`
Bij inline elementen wordt het rechthoekige gebied zonodig opgesplitst in meerdere delen.
`<H2>De ... kan <SPAN STYLE="color: black; background-color: yellow;">op de volgende regel</SPAN> doorlopen</H2>`
Bij list-item elementen valt de markering buiten het rechthoekige gebied van het element en krijgt dan ook geen achtergrondkleur (Netscape Navigator 4 ondersteunt geen stijlen toegekend aan het LI element).
`<UL> <LI STYLE="color: black; background-color: yellow;">item 1</LI> <LI>item 2</LI> <LI STYLE="color: black; background-color: yellow;">item 3</LI> </UL>`
In het volgende voorbeeld is voor de elementen BODY en H2 een achtergrondkleur gedefinieerd. Het eerste H2 element krijgt de opgegeven achtergrondkleur rood. Aan het tweede H2 element is het STYLE element toegevoegd met de waarde background-color: transparent. Hierdoor krijgt dit element niet de achtergrondkleur rood, maar schijnt de kleur van het parent element BODY door.
In de Head van het document staat: `<STYLE TYPE="text/css"> <!-- BODY { color: black; background-color: #FFFFCC; } H2 { color: black; background-color: red; } --> </STYLE>` en het document ziet er als volgt uit: `<H2>De ... rood</H2> <H2 STYLE="background-color: transparent;">De ... transparant</H2>`

background-image Met de background-image eigenschap wordt een achtergrondafbeelding voor het element bepaald.

Mogelijke waarden zijn een url en none.

De background-image eigenschap kan gecombineerd worden met de background-color eigenschap. De kleur wordt weergegeven als de afbeelding niet gevonden wordt, of als vulling van de transparante delen van de afbeelding.

De beginwaarde is none.

De eigenschap kan gebruikt worden voor alle elementen en wordt niet geërfd.

De background-image eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.

De opbouw is:

background-image: url(URI)

De URI (Uniform Resource Identifier) heeft de volgende opbouw:

http://host/path

Host specificeert het adres van de server, waarop zich de gevraagde afbeelding bevindt. Het kan een IP-adres zijn, maar meestal is het de naam van de machine. Een machinenaam (ook wel domeinnaam) bestaat uit meerdere delen gescheiden door een punt, begint vaak met "www" en eindigt met een landcode (bijvoorbeeld "nl", "be", "uk") of de vooral in de Verenigde Staten gebruikte code voor de sector (bijvoorbeeld "com" voor commerciële instellingen en "org" voor non-profit organisaties).
Path geeft aan hoe de gevraagde afbeelding op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.

Het is niet altijd nodig een complete URI op te nemen. Als de gevraagde afbeelding zich op de lokale server bevindt, dan volstaat de volgende URI:

path

Net als voor de achtergrondkleur geldt bij elementen op blokniveau dat de achtergrondafbeelding doorloopt over het hele rechthoekige gebied van het element (de beginwaarde van de background-repeat eigenschap is repeat).
`<H2 STYLE="background-image: url(grijs.gif); color: yellow;">De achtergrond is een afbeelding</H2>`
Het gebruik van een achtergrondafbeelding kan gecombineerd worden met een achtergrondkleur. Wanneer de achtergrondafbeelding niet geladen kan worden (omdat de afbeelding niet beschikbaar is, of omdat de gebruiker de optie afbeeldingen weergeven heeft afgezet), wordt in ieder geval de achtergrondkleur nog gebruikt. Daarnaast kan de combinatie ook toegepast worden om de achtergrondkleur door de transparante delen van de afbeelding heen te laten schijnen. In het volgende voorbeeld is dit gedaan bij het BODY element, maar het kan uiteraard ook bij andere elementen.
Aan het BODY element is het STYLE attribuut toegevoegd: `STYLE="background-image: url(handl.gif); background-color: #FFFFCC;"`

background-repeat Met de background-repeat eigenschap wordt bepaald of en hoe de achtergrondafbeelding wordt herhaald.

Mogelijke waarden zijn repeat, repeat-x, repeat-y en no-repeat.

De waarde repeat zorgt ervoor dat de afbeelding binnen het element zowel horizontaal als verticaal wordt herhaald. Bij de waarde repeat-x gebeurt dat alleen in horizontale richting en bij de waarde repeat-y alleen in verticale richting. Bij de waarde no-repeat wordt de afbeelding slechts één keer weergegeven.

De beginwaarde is repeat.

De eigenschap kan gebruikt worden voor alle elementen en wordt niet geërfd.

De background-repeat eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.

De opbouw is:

background-repeat: waarde

In het volgende voorbeeld is aan het BODY element van de documenten in een frameset steeds het STYLE attribuut toegevoegd met de eigenschappen background-image en background-repeat. De waarde repeat is de beginwaarde en kan dus ook weggelaten worden. Bij de overige waarden wordt de afbeelding geplaatst in de linker bovenhoek en van daaruit afhankelijk van de waarde al dan niet meerdere keren herhaald. Door ook de background-position eigenschap te gebruiken kan een andere beginpunt voor de eerste afbeelding opgegeven worden.

In het frame linksboven is de opbouw van het STYLE attribuut van het BODY element:

STYLE="background-image: url(../images/grijs.gif); background-repeat: repeat;"

background-attachment Met de background-attachment eigenschap wordt bepaald hoe de achtergrondafbeelding geplaatst wordt ten opzichte van de inhoud van het document.

Mogelijke waarden zijn scroll en fixed.

Bij de waarde scroll heeft de achtergrondafbeelding een vaste plaats ten opzichte van de inhoud van het document. Door de schuifbalk te bewegen, wordt de achtergrondafbeelding met de inhoud van het document mee verplaatst. Bij de waarde fixed heeft de achtergrondafbeelding een vaste plaats in het venster. Bewegen van de schuifbalk verplaatst wel de inhoud van het document, maar niet de achtergrondafbeelding.

De beginwaarde is scroll.

De eigenschap kan gebruikt worden voor alle elementen en wordt niet geërfd.

De background-attachment eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3, Netscape Navigator 4 en Opera 3.5.

De opbouw is:

background-attachment: waarde

Voorbeelden van de background-attachment eigenschap kunnen het beste bekeken worden in afzonderlijke documenten.

In het eerste document wordt de waarde scroll gebruikt en verplaatst de achtergrondafbeelding met de inhoud van het document.

<BODY STYLE="background-image: url(grijs.gif); background-repeat: repeat-x; background-attachment: scroll;">

In het tweede document wordt de waarde fixed gebruikt en houdt de achtergrondafbeelding zijn vaste plaats in het venster.

<BODY STYLE="background-image: url(grijs.gif); background-repeat: repeat-x; background-attachment: fixed;">

In het derde document wordt een gefixeerde achtergrondafbeelding gebruikt als watermerk. De plaats van de afbeelding wordt bepaald met de background-position eigenschap.

<BODY STYLE="background-image: url(handl.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: center;">

background-position Met de background-position eigenschap kan de plaats van de achtergrondafbeelding vastgelegd worden.

Mogelijke waarden zijn lengte en percentage. Daarnaast kunnen de volgende waarden gebruikt worden: in horizontale richting left, center en right, in verticale richting top, center en bottom.

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de afmetingen van het element zelf. Gemeten wordt vanaf de linker bovenhoek van het element. Bij de waarden lengte en percentage betreft de eerste waarde de horizontale richting en de tweede de verticale. Bij de overige waarden maakt de volgorde niet uit.
Het gebruik van percentages vraagt enige oefening. Gerekend wordt vanaf de linkerbovenhoek van de afbeelding en de linker bovenhoek van het element. De combinatie 0% 0% betekent dus dat de linker bovenhoek van de afbeelding geplaatst wordt in de linker bovenhoek van het element. De combinatie 100% 100% plaatst de rechter benedenhoek van de afbeelding in de rechter benedenhoek van het element. Een combinatie van 60% 60% betekent dat het punt in de afbeelding op 60% van de linkerkant en 60% van de bovenkant van de afbeelding, geplaatst wordt op het punt in het element op 60% van de linkerkant en 60% van de bovenkant van het element.
Wanneer slechts één waarde is opgenomen voor lengte of percentage, wordt deze in beide richtingen gebruikt. Wanneer slechts één van de verticale of horizontale sleutelwoorden is opgenomen, wordt voor de andere richting center aangehouden.
Wanneer ook gebruik gemaakt wordt van de background-repeat eigenschap, wordt de afbeelding, ongeacht de beginpositie, bij de waarde repeat-y over de hele hoogte van het element herhaald en bij de waarde repeat-x over de hele breedte.
De waarden lengte en percentage mogen met elkaar gecombineerd worden. Een combinatie van lengte of percentage met de horizontale en verticale sleutelwoorden is echter niet mogelijk.
Ook negatieve waarden voor lengte en percentage zijn toegestaan.

De beginwaarde is 0%,0%.

De eigenschap kan gebruikt worden voor elementen op blokniveau en replaced elementen.

De eigenschap wordt niet geërfd.

De background-position eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3 en Netscape Navigator 4.

De opbouw is:

background-position: waarde

In het volgende voorbeeld is aan het BODY element van de documenten in een frameset steeds het STYLE attribuut toegevoegd met de eigenschappen background-image, background-repeat en background-position. De lijnen in het frame rechtsboven markeren het punt op 65% van de linkerkant en 65% van de bovenkant van zowel het frame (of beter gezegd het BODY element) als de afbeelding. Voor het frame rechtsonder is slechts één sleutelwoord opgenomen. In de andere richting wordt daarom de waarde center aangehouden.

In het frame linksboven is de opbouw van het STYLE attribuut van het BODY element:

STYLE="background-image: url(../images/grijs.gif); background-repeat: no-repeat; background-position: 100% 0%;"

background In background eigenschap kunnen de verschillende eigenschappen van de achtergrond op een verkorte wijze worden gecombineerd.

Mogelijke waarden zijn background-color, background-image, background-repeat, background-attachment en background-position.

Voor een toelichting op de verschillende waarden zie de afzonderlijke eigenschappen.
Het maakt niet uit in welke volgorde de waarden worden opgenomen.

De beginwaarde is niet gedefinieerd voor gecombineerde eigenschappen. Indien een waarde niet is opgegeven, wordt de beginwaarde van de betreffende eigenschap aangehouden.

De eigenschap kan gebruikt worden voor alle elementen en wordt niet geërfd.

Door Microsoft Internet Explorer 3 worden de waarden background-repeat, background-attachment en background-position alleen ondersteund in het BODY element en enkele tabel-elementen. Bij de waarde background-position wordt de parameter lengte niet ondersteund. Bovendien wordt bij het BODY element de positie niet of niet correct berekend.
De waarden background-attachment en background-position worden niet ondersteund door Netscape Navigator 4. Indien de waarde background-color niet is opgegeven, houdt Netscape Navigator 4 hiervoor ten onrechte black aan.

De opbouw is:

background: waarde

Bij elementen op blokniveau moet de achtergrond over het hele rechthoekige gebied van het element (de box) doorlopen. Bij Microsoft Internet Explorer 3 en Netscape Navigator 4 gebeurt dit niet correct, zie voor een toelichting de beschrijving van de box.
`<H2 STYLE="color: black; background: yellow;">De achtergrond ... geel</H2>`
In het volgende voorbeeld is aan het BODY element van de documenten in een frameset steeds het STYLE attribuut toegevoegd met de background eigenschap. Als waarden zijn de volgende eigenschappen gebruikt: background-color, background-image, background-repeat en background-position.
In het frame linksboven is de opbouw van het STYLE attribuut van het BODY element: `STYLE="color: black; background: url(../images/grijs.gif) no-repeat bottom #FFFFCC;"` Omdat de afbeelding niet herhaald wordt als gevolg van de waarde no-repeat, wordt als positie in horizontale richting center aangehouden. In het frame rechtsonder is de waarde repeat-x gebruikt. Vanuit de beginpositie bottom center wordt de afbeelding in horizontale richting zowel naar links als naar rechts herhaald.

Inhoud Handleiding HTML Index Overzicht stijleigenschappen