CSS beschrijving eigenschap background-image

Handleiding HTML Legenda | Voorbeelden | Kleur en achtergrond | CSS eigenschappen | Begin


background-image


CSS 1
IE 4.0
NN 4.0
MOZ 1.0
FF 1.0
OP 3.5
De background-image eigenschap bepaalt of een achtergrondafbeelding moet worden weergegeven en zo ja welke.

Waarden: <uri> | none | inherit
Beginwaarde: none
Heeft betrekking op: alle elementen
Wordt geërfd: nee
Mediagroep(en): visual

De eigenschap wordt niet geërfd, maar de achtergrondafbeelding zal wel doorschijnen in een eventueel ingesloten element (behalve als voor dat element een achtergrondkleur of -afbeelding is gedefinieerd). Dat komt omdat de beginwaarde van de background-color eigenschap transparent is.

De achtergrondafbeelding heeft betrekking op het hele rechthoekige gebied dat gevormd wordt door het element en wordt ook doorgezet onder de padding en de rand van een element. De margin van een element blijft daarentegen altijd transparant en laat dus de achtergrondafbeelding of -kleur van het parent element doorschijnen.
De achtergrondafbeelding heeft geen betrekking op de markering in een lijst, behalve als de list-style-position eigenschap is gebruikt met de waarde inside.

Om problemen bij de weergave als gevolg van een slechte combinatie voorgrondkleur en achtergrond te voorkomen, is het verstandig de background-image eigenschap altijd gecombineerd te gebruiken met de eigenschappen color en background-color. De achtergrondafbeelding wordt voor de achtergrondkleur geplaatst en deze laatste is daardoor alleen te zien als de afbeelding niet beschikbaar is, of als de afbeelding transparante delen heeft. De achtergrondkleur wordt bovendien weergegeven gedurende de tijd dat de afbeelding tijdens het laden (vanaf de server) nog niet beschikbaar is. Door het opnemen van de background-color eigenschap biedt je ook dan een leesbare combinatie van voor- en achtergrondkleur.

Voorbeelden:

background-image: url(grijs.gif)

background-image: url(afbeelding/grijs.gif)

background-image: url(http://www.domein.nl/grijs.gif)
<uri>
CSS: 1 IE: 4.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde heeft de volgende opbouw:

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

Wanneer de afbeelding gedefinieerd wordt in een extern stijlblad, dan is de URI relatief ten opzichte van het stijlblad.

De URI kan optioneel ingesloten worden tussen enkele of dubbele aanhalingstekens:

url('URI')
url("URI")

Als de afbeelding gedefinieerd wordt door middel van een inline stijl, dan moeten voor de URI andere aanhalingstekens gebruikt worden, dan voor de waarde van het STYLE attribuut:

STYLE="background-image: url('URI')"

Aanhalingstekens moeten gebruikt worden als de URI een spatie bevat.
none
CSS: 1 IE: 4.0 NN: 4.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde none bepaalt dat geen achtergrondafbeelding moet worden weergegeven.

Ook als background-image: none is gebruikt, bestaat de kans dat er een achtergrondafbeelding te zien is. Dat kan het geval zijn als voor een parent element wel achtergrondafbeelding is opgenomen. Dit wordt voorkomen als in combinatie met background-image: none ook een achtergrondkleur gedefinieerd wordt met de background-color eigenschap.
inherit
CSS: 2 IE: - NN: 6.0 MOZ: 1.0 FF: 1.0 OP: (3.5)

De waarde van het parent element wordt aangehouden.

De waarde wordt niet meer ondersteund door Opera 4 t/m 6.


Bijzonderheden ondersteuning

Microsoft Internet Explorer 4.0
- De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION. Bij het INPUT element worden aankruisvakjes en keuzerondjes niet ondersteund.
- Wanneer de eigenschap gebruikt wordt voor het OL element, wordt de achtergrondkleur alleen weergegeven achter de onderdelen van de lijst en het gebied tussen de onderdelen en de markering. De markering zelf valt er buiten.
- De eigenschap wordt niet ondersteund voor het HR element.
Microsoft Internet Explorer 5.0 t/m 6.0
- De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION. Bij het INPUT wordt de achtergrondafbeelding bij aankruisvakjes en keuzerondjes in een vierkant vak buiten het control weergegeven.
- Wanneer de eigenschap gebruikt wordt voor de elementen UL of OL, wordt de achtergrondafbeelding alleen weergegeven achter de onderdelen van de lijst en niet achter de markering.
Mozilla 1.0/1.1
- De eigenschap wordt niet ondersteund voor het SELECT element, behalve als aan dat element het MULTIPLE attribuut is toegevoegd om een meervoudige keuzelijst te maken.
- De achtergrondafbeelding wordt niet doorgezet onder de rand van een element. Dit is gecorrigeerd in versie 1.02.
Mozilla 1.3 en hoger
- De eigenschap wordt niet ondersteund voor het SELECT element, behalve als aan dat element het MULTIPLE attribuut is toegevoegd om een meervoudige keuzelijst te maken.
Firefox
- De eigenschap wordt niet ondersteund voor het SELECT element, behalve als aan dat element het MULTIPLE attribuut is toegevoegd om een meervoudige keuzelijst te maken.
Netscape Navigator 4.x
- De achtergrondafbeelding wordt niet achter het hele rechthoekige oppervlak van een element op blokniveau (zoals P, BLOCKQUOTE en Hx) weergegeven, maar alleen achter de tekst.
- De achtergrondafbeelding wordt niet doorgezet onder de rand van een element.
- Wanneer de eigenschap wordt opgenomen voor een inline element, verandert dat in een element op blokniveau (en wordt daardoor voorafgegaan en gevolgd door een overgang naar een nieuwe regel).
- Wanneer de afbeelding niet beschikbaar is en wel een achtergrondkleur is gedefinieerd, wordt de kleur niet achter het hele element weergegeven, maar alleen in een vierkant blokje aan het begin van het element.
- Wanneer de achtergrondafbeelding is gedefinieerd in een extern stijlblad, dan wordt ervan uitgegaan dat de URI van de afbeelding relatief is ten opzichte van het document, in plaats van ten opzichte van het stijlblad.
- De eigenschap wordt niet ondersteund voor de elementen TABLE en TR, wel voor TD en TH.
- Wanneer de eigenschap gebruikt wordt voor elementen waarmee formulier controls gemaakt worden, is het resultaat vaak tamelijk rampzalig. Voor het INPUT element wordt de eigenschap niet ondersteund, maar alle controls worden weergegeven als element op blokniveau (en dus voorafgegaan en gevolgd door een overgang naar een nieuwe regel). Bij het TEXTAREA element wordt de achtergrondafbeelding wel weergegeven, maar verliest het element verder zijn functie en wordt het gezien als element op blokniveau. Voor het SELECT element geldt in principe hetzelfde als voor het TEXTAREA element, alleen worden andere elementen en inhoud van het HTML-document niet meer weergegeven. Voor het OPTION element wordt de eigenschap niet ondersteund.
- De eigenschap wordt niet ondersteund voor het LI element.
- De eigenschap wordt wel ondersteund voor de elementen UL en OL, maar de markering wordt binnen de inhoud van het item van de lijst geplaatst (als bij de list-style-position eigenschap met de waarde inside. Bij beide elementen wijzigt de markering bovendien in een klein gesloten rondje.
- De eigenschap wordt niet ondersteund voor het IMG element. Bovendien moet rekening gehouden worden met het algemene probleem van het koppelen van een stijl aan het IMG element: niet alleen wordt de afbeelding vaak op een geheel andere plek in het document weergegeven, ook wordt de weergave van stijlen voor andere elementen negatief beïnvloed.
- De eigenschap wordt ondersteund voor het A element in de zin dat de achtergrondafbeelding wordt weergegeven, maar de hyperlink verliest zijn functie en is dus niet meer aanklikbaar.
- De eigenschap wordt niet ondersteund voor het HR element.
- Bij de waarde none wordt niet een gedefinieerde achtergrondkleur weergegeven, maar schijnt altijd de achtergrond van het parent element door.
- De waarde inherit wordt geïnterpreteerd als niet beschikbare afbeelding: aan het begin van het element wordt een vierkant blokje geplaatst in de achtergrondkleur van het element zelf, of indien deze niet gedefinieerd is in de achtergrondkleur van het parent element.
Netscape Navigator 6.0/6.1
- De eigenschap wordt niet ondersteund voor het SELECT element, behalve als aan dat element het MULTIPLE attribuut is toegevoegd om een meervoudige keuzelijst te maken.
- De achtergrondafbeelding wordt niet doorgezet onder de rand van een element.
- Ook wanneer de eigenschap gebruikt is voor de elementen TABLE of TR, begint de achtergrondafbeelding in elke cel van de tabel opnieuw. Dit heeft alleen betrekking op de weergave in de zogenaamde quirks modus.
Netscape Navigator 6.2 t/m 7.0
- De eigenschap wordt niet ondersteund voor het SELECT element, behalve als aan dat element het MULTIPLE attribuut is toegevoegd om een meervoudige keuzelijst te maken.
- De achtergrondafbeelding wordt niet doorgezet onder de rand van een element. Dit is gecorrigeerd in versie 7.01.
Opera 3.5/3.6
- De eigenschap wordt niet ondersteund voor de elementen TABLE, TD, TH en TR.
- De eigenschap wordt niet ondersteund voor de elementen INPUT, SELECT, OPTION en TEXTAREA.
- Wanneer de eigenschap gebruikt wordt voor de elementen UL of OL, wordt de achtergrondafbeelding alleen weergegeven achter de onderdelen van de lijst en niet achter de markering.
- De eigenschap wordt niet ondersteund voor inline elementen (dus ook niet voor het IMG element).
- De eigenschap wordt niet ondersteund voor het HR element.
Opera 4.0 t/m 6.0
- De eigenschap wordt niet ondersteund voor de elementen INPUT, SELECT, OPTION en TEXTAREA.
- De achtergrondafbeelding wordt niet doorgezet onder de rand van een element.
- Wanneer de eigenschap gebruikt wordt voor de elementen UL of OL, wordt de achtergrondafbeelding alleen weergegeven achter de onderdelen van de lijst en niet achter de markering.
- De eigenschap wordt niet ondersteund voor inline elementen (dus ook niet voor het IMG element).
- De waarde inherit wordt niet meer ondersteund.
Opera 7.0 en hoger
- De eigenschap wordt niet ondersteund voor de elementen SELECT en OPTION. Bij het INPUT element wordt de achtergrondafbeelding bij aankruisvakjes en keuzerondjes in een vierkant vak buiten het control weergegeven.
- Wanneer de eigenschap gebruikt wordt voor de elementen UL of OL, wordt de achtergrondafbeelding alleen weergegeven achter de onderdelen van de lijst en niet achter de markering.


Legenda | Voorbeelden | Kleur en achtergrond | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 23 juni 2007