Plaats een achtergrond afbeelding

De beschrijving hieronder is primair bedoeld voor beheerders. Omdat er meer mogelijkheden zijn maken we een klein uitstapje om een webmaster of modulebouwer op het spoor te zetten.

Een achtergrond afbeelding kan op een pagina worden geplaatst op een pagina. Voor de onderstaande beschrijving is een beperkte kennis van HTML en CSS nodig.

Het is noodzakelijk dat de opmaak van de pagina aangepast kan worden. Indien gebruik wordt gemaakt van een tekstverwerker (zoals TinyMCE of CKeditor), dan moet de HTML-knop aanwezig zijn om zelf de HTML aan te kunnen passen.
Verder moet in het gebruikte invoerformaat de HTML-filter uitgeschakeld zijn of de te gebruiken tags worden aangevuld. Tevens moet de URL-filter uit staan omdat door dit filter de URL van de achtergrondafbeelding op een verkeerde wijze wordt aangepast. Hiervoor zou een apart invoerformaat gemaakt kunnen worden door de beheerder in: Beheren » Site-instellingen » Invoerformaten.

Op alle pagina’s (met een vaste afbeelding)

In veel programma’s, waarmee webpagina aangemaakt kunnen worden, wordt de afbeelding in het <body> statement geplaatst. In Drupal is dit alleen aan te raden indien de afbeelding op alle pagina’s te zien moet zijn. Als het op alle pagina’s moet, dan kan het „page.tpl.php” template worden aangepast bij PHPtemplated sjablonen (templates). Voor de normale gebruiker van een Drupal website is dit niet mogelijk: alleen een beheerder heeft hier toegang toe. We gaan hier niet verder op in.

Op sommige pagina’s (met een vaste afbeelding)

Ook dit is meer voorbehouden aan beheerders. Hiervoor moet het „node.tpl.php” template worden aangepast. Ook dit wordt verder niet behandeld.

Op incidentele pagina’s met ieder een andere afbeelding

Een gebruiker, die van alle HTML instructies gebruik kan maken en toegang heeft tot de HTML van een pagina, kan de afbeelding achter het tekstdeel zetten. De afbeelding komt dan niet onder de titel en eventuele extra informatie tussen de titel en de inhoud van de node (pagina). De afbeelding kan gedefinieerd worden tussen een  van de volgende tagcombinaties: <p> … </p> en <div> … </div>. Zoals bekend wordt verondersteld geeft de tag: <p> een alinea aan, dus de afbeelding staat dan alleen achter die alinea.
De <div> tag kan meerdere alinea’s omvatten en is dus de meest aangewezen tag om de afbeelding in te plaatsen.

Voorbeeld

Om de afbeelding (bijvoorbeeld achtergrond.png) in de tekst te kunnen plaatsen zetten we de volgende code bovenaan in de HTML van het tekstdeel van de node:

<div style="background-image: url(/files/achtergrond.png);">

en achter de tekst:

</div>

We zien dan dat de afbeelding steeds herhaald wordt. Als dit niet de bedoeling is kan vóór het aanhalingsteken sluiten de volgende instructie worden geplaatst: background-repeat: no-repeat;

Verder kunnen andere CSS instructies worden ingevoegd, zoals de plaats van de afbeelding, bijvoorbeeld: background-position: top center;

Bij elkaar ziet het er dan zo uit:

<div style="background-image: url(/files/achtergrond.png); background-repeat: no-repeat;
background-position: top center;">

en achter alle tekst:

</div>

De inhoud van de pagina moet dus tussen beide bovenstaande HTML-opdrachten komen. Meer informatie over extra mogelijkheden kan onder andere worden gevonden op: http://www.html-site.nl/background-image.

Ook andere varianten zijn mogelijk, zoals het plaatsen van meerdere afbeeldingen. Wees hiermee voorzichtig: je hebt niet alle invloed op de wijze waarop de pagina wordt weergegeven, zoals:

  • de bezoeker heeft een andere lettergrootte of ander font ingesteld (zeer klein of juist zeer groot)
  • de bezoeker heeft een scherm met heel andere afmetingen.

Hierdoor kan het beoogde effect anders uitpakken.