Achtergrondplaatje veranderen II: aanpak met CSS

Hieronder zie je vijf knoppen. Als je die indrukt verschijnt er een plaatje op de achtergrond. De tekst verandert niet. Als je op "Default" drukt verdwijnt het plaatje weer.
Het effect beperkt zich tot het actieve venster of frame.

       

Hier staat beschreven hoe je het plaatje op de achtergrond door JavaScript kunt laten veranderen. De code staat onderaan de bladzijde.

Opmerking:
 
Deze techniek werkt ook als je het volledige background-eigenschap van CSS gebruikt, bijvoorbeeld in

body {background:white url(plaatje.gif) repeat}

De code ziet er als volgt uit:
 
(Zet dit JavaScript in de <HEAD>)

<script>
function achtergrondplaatje(naam) {
  document.body.style.backgroundImage = "url(" + naam + ")";
}
</script>

Opmerking:
 
Een beschrijving van het maken van knoppen is te vinden in het item "Knop met tekst of een plaatje", in de rubriek "Formulieren". Er is hier gebruik gemaakt van <BUTTON>-tags.
 
Kies de hoofdkleur van het achtergrondplaatje zodanig dat er een goed contrast is met de tekst. Zorg er ook voor dat het plaatje "rustig" is en prettig oogt. Niet elk plaatje leent zich als achtergrond! (De plaatjes die hier zijn gebruikt zijn een schoolvoorbeeld van hoe het NIET moet.)
Een beschrijving van kleuren in HTML vind je in het item "Kleurcodes voor tekst, links en achtergrond".
 
Zie ook de items "Over kleurgebruik op je website", "Tekstkleur veranderen II: Aanpak met CSS" en "Achtergrondkleur veranderen II: Aanpak met CSS".

 
terug

html-276; Laatste wijziging: 25 april 2020