Ben's Hobbyhoekje -- Watermerk als achtergrond

Watermerk als achtergrond

Aan de rechterkant van dit scherm zie je het Logo van Ben's Hobbyhoekje. Als je de tekst van deze bladzijde laat scrollen blijft dit plaatje staan. De tekst scrollt er over heen. Dat heet een watermerk.
Hier staat beschreven hoe je dit aanpakt. De code staat onderaan deze bladzijde.

Er worden drie items besproken:
1. De <style>-tag om een watermerk te maken.
2. Ander gebruik van deze <style>-tag.
3. Beperkingen bij het gebruik.
Om ervoor te zorgen dat het achtergrondplaatje er echt als watermerk uitziet moet je zelf zorgen voor fletse kleuren. Dat doe je het beste door de kleuren van het plaatje heel licht te maken.
Dit werkt alleen goed met een <style>-tag. Het opnemen van het attribuut background=" ... " in de <body>tag kan vreemde bij-effecten geven. Dat raad ik dus niet aan.
De style wordt niet gekoppeld aan een bepaalde tag (zoals body, p, td enz.), class (zoals .aaa,.bbb), of id (#cc, #dd, ...).
De onderstaande knop roept een function aan die in document.body.style.cssText het keyword right verandert in left en weer terug...

De code ziet er als volgt uit:

(Zet deze code in de <HEAD>)

<style>
body {
background : #e4e9f6;
background-repeat : no-repeat;
background-position : right;
background-attachment : fixed;
}
</style>

<script>
var verplaatst = false;
function Zwabber() {
if (verplaatst)
document.body.style.cssText="background:#e4e9f6 url(bbhead0w.gif)
no-repeat fixed right"
else
document.body.style.cssText="background:#e4e9f6 url(bbhead0w.gif)
no-repeat fixed left";
verplaatst = !verplaatst; }
</script>

Bij de attributen kunnen ook andere waarden gebruikt worden dan hier is gebruikt. Dat leidt er toe dat de achtergrond er anders uit gaat zien. Zie onderstaande tabel.

Attribuut	Keywords	Opmerkingen
background	RGB-kleurcode	Kleur van de achtergrond, ook het item "Kleurcodes voor tekst, links en achtergrond" in de rubriek "Grapgics", elders op deze site. Dit item mag je eventueel weglaten als je de kleurcode hebt gezet in de <body>-tag.
background-image	url("naam")	URL van het plaatje. De naam moet tussen dubbele aanhalingstekens staan. Je kunt hier alles neerzetten wat je wilt, ook een pathname naar een directory elders op je site. Desgewenst zet je er een URL in die wijst naar een heel andere website. De enige eis is dat er gewezen wordt naar een plaatje waar je browser wat mee kan.
background-image	none	Geen plaatje op de achtergrond
background-repeat	repeat	Plaatje wordt herhaald in zowel horizontale als in verticale richting. Dit is hetzelfde als een plaatje in het background-attribuut van de <body>-tag zetten.
	no-repeat	Plaatje wordt niet herhaald.
	repeat-x	Plaatje wordt alleen herhaald in horizontale richting.
	repeat-y	Plaatje wordt alleen herhaald in verticale richting.
background-position	top	Plaatje wordt bovenaan in het window of frame geplaatst.
	bottom	Plaatje wordt onderaan in het window of frame geplaatst.
	left	Plaatje wordt links in het window of frame geplaatst.
	right	Plaatje wordt rechts in het window of frame geplaatst.
	center	Plaatje wordt midden in het window of frame geplaatst (dit kan zowel horizontaal als verticaal zijn; het hangt er van als of top\|bottom en/of left\|right is opgegeven).
	'position'	Plaatje wordt op een zelf opgegeven locatie in het window of frame geplaatst. Dit kan in px, pt, em, enz., maar ook in een percentage van de afmetingen van het window. Voor printdoeleinden kun je ook inch, mm en cm gebruiken. Zie Over eenheden in CSS.
background-attachment	scroll	Plaatje scrollt mee met de tekst.
background-attachment	fixed	Plaatje blijft staan als de tekst wordt gescrolled.

Opmerking:

Kies de hoofdkleur van het achtergrondplaatje zodanig dat er een goed contrast is met de tekst. Het contrast van het plaatje met de rest van de achtergrond moet klein zijn, dus weinig felle kleurverschillen. Dat geldt ook voor de kleuren van het plaatje zelf.
Zorg er ook voor dat het plaatje "rustig" is en prettig oogt. Niet elk plaatje leent zich als achtergrond!

Zie ook het item "Achtergrondplaatje veranderen".