VOORBEELD PAGINA 1

[NAAR VOLGENDE VOORBEELD PAGINA]

We beginnen eerst met alleen de <body> tag - en zoals je kunt zien wordt de linkerkant "betegeld" met het achtergrond plaatje voor de rand (vk90pb.jpg), door deze CSS regels:

    body {background-image:url(./divpics/vk90pb.jpg);
              background-repeat:repeat-y;
         }

Dit is het achtergrond plaatje voor de rand:

(vk90pb.jpg)
Het plaatje wordt gebruikt als "verticale betegeling" door het invoeren van de CSS regel

  background-repeat: repeat-y;

als we deze regel weglaten, zou de default background-repeat: repeat instelling geldig zijn, dat betekent zowel x (horizontaal) als y (verticaal) en dus werd dan de hele pagina met het plaatje betegeld.

De offset voor de getegelde plaatjes is gezet op: 45 pixels naar beneden, om een naadloze aansluiting te krijgen met het plaatje voor de hoek links boven (zie volgende pagina). Dit wordt geregeld met deze lijn:

    background-position: 0px 45px;

(NB: de 45 pixel lijnen van de linker bovenhoek worden op deze pagina gevuld met het rand plaatje, want er is nog geen <div> voor die bovenhoek. De betegeling begint niet op 45 pixels omlaag, maar is 45 pixels omlaag verschoven!)

De rest van de achtergrond wordt gekleurd met de lijn:

   background-color: #faebd7;

Nu even het hele fragment CSS voor de achtergrond:

      body {background-image:url(./divpics/vk90pb.jpg);
            background-repeat:repeat-y;
            background-position: 0px 45px;
            background-color: #faebd7;
           }

[NAAR VOLGENDE VOORBEELD PAGINA]

(18-12-2006 rev. 29-03-2022)