Websites met stijl

16. Achtergrond-afbeeldingen

De stijlregels van de body

Omdat de body het element is dat de hele website omvat, staan daarin de instellingen die voor de hele website gelden: het lettertype, grootte van de letters, de voorgrondkleur (letterkleur), de achtergrondkleur en de achtergrondafbeelding.

Je gaat nu eerst die stijlregels in het stijlblad zetten. Daarna zullen de verschillende regels worden toegelicht.

• Open het stijlblad in de editor. (Het is onder de naam terschelling.css opgeslagen in de map terschelling/css.)
• Maak het stijlblad helemaal leeg. Alle stijlregels waarmee je in het vorige hoofdstuk hebt geëxperimenteerd moeten weg.
• Tik de tekst van figuur 1 nauwkeurig over.
  Omdat regel 1 nogal ingewikkeld is, kan je die misschien het beste kopiëren vanuit figuur 1.)

  Je zou ook kunnen proberen om regel 1 zelf te maken via Google Fonts. Het gaat om de fonts 'Open Sans' (normal 400 en bold 700) en 'Open Sans Condensed' (alleen bold 700). Probeer het zonder aanwijzingen. Lukt dat niet kijk dan hier.

• Controleer, verbeter eventuele fouten en sla het stijlblad op.

Toelichting

• Regel 1 zorgt ervoor dat het lettertypes 'Open Sans Condensed' (vet) en 'Open Sans'(normaal en vet) worden geladen. (Uitleg in hoofdstuk 15)
  'Open Sans' wordt in de hele website gebruikt. 'Open Sans Condensed' is er alleen voor de titel Terschelling in de kopfoto.
• Regel 2 is commentaar (toelichting bij regel 1)
• Regel 3 is een lege regel. Met lege regels wordt het stijlblad overzichtelijker.
• Regel 4 en regel 11 zijn het begin en het einde van het body-element.
• Regel 5 zet de marge op 0, zodat de website doorloopt tot de rand van het scherm.
  (In de meeste browsers heeft de body standaard een marge van 8px. Dat willen we niet.)
• Regel 6 stelt het lettertype in op 'Open Sans' (met als reserve-letter: sans-serif).
• Regel 7 stelt de grootte van de letter op 110%, 10% groter dan de standaard letter op de computer.
• In regel 8 wordt de (letter-)kleur ingesteld:       
• In regel 9 wordt aangegeven dat de afbeelding zand.png gebruikt wordt als achtergrondafbeelding.
  • Let op: zand.png (Geen .jpg)
  • ../img/zand.png is het pad van terschelling/css naar terschelling/img/zand.png
    (Uitleg nodig? Zie de naslag over pad).
• Regel 10 tenslotte geeft aan dat de achtergrond-afbeelding niet meebeweegt bij het scrollen.

In de onderstaande experimenten ga je de achtergrond op allerlei manieren aanpassen. Als je klaar bent met experimenteren moet je het stijlblad weer in overeenstemming brengen met figuur 1.

Experiment 1: Een betegelde achtergrond

• Laat het stijlblad terschelling.css gedurende de experimenten geopend staan. Je gaat er steeds kleine veranderingen in aanbrengen.
• Bekijk nu het bestand duin.html in je browser. De achtergrond bestaat uit zand. Het lijkt één grote afbeelding, maar in werkelijkheid is het een kleine afbeelding, waarmee de achtergrond betegeld is. Dat kan je beter zien door een andere achtergrond te gebruiken:
• Verander in regel 9 van het stijlblad zand.png in zand2.png. Zand2.png is hetzelfde als zand.png, maar heeft een gele rand.
  Bekijk duin.html in je browser. Je ziet nu duidelijk dat de achtergrond als het ware betegeld wordt. De afbeelding wordt horizontaal en verticaal herhaald.
• Verander nu in regel 8 zand2.png in polder2.jpg (let op: nu wel jpg), een foto van een boerderijtje.
  Bekijk duin.html in je browser (denk aan het verversen van de pagina).

Gebruik duin.html om de opmaak te bekijken. Dit is de kleinste en overzichtelijkste webpagina. Je kan ook best een van de andere pagina's bekijken, maar met name de video op index.html is storend groot zolang de opmaak daarvan nog niet geregeld is.

Experiment 2: tegelen in één richting

Je kan ook in één richting (horizontaal of verticaal) tegelen; of helemaal niet, dan staat het plaatje er maar één keer. Hieronder staat de mogelijkheden. De uitleg staat op elke regel in het commentaar /* ..... */.

figuur 2a background-repeat:repeat-x; /* herhaalt alleen in horizontale richting */ figuur 2b background-repeat:repeat-y; /* herhaalt alleen in vertictale richting */ figuur 2c background-repeat:no-repeat; /* herhaalt niet - plaatje wordt 1x getoond */ figuur 2d background-repeat:repeat; /* herhaalt horizontaal en verticaal */

Repeat is de standaard methode: als je niets opgeeft wordt er horizontaal én verticaal getegeld.

• Probeer de bovenstaande regels één voor één uit. Zet die in het stijlblad bv. na 'regel 9' (zie figuur 1). Ergens anders binnen de body mag ook, de volgorde van de regels is niet belangrijk.
• Het mooist is het effect van background-repeat te zien met als achtergrond polder2.jpg, duin1.jpg of eventueel zand2.png.
• Scroll duin.html om het effect ook te zien als een achtergrondafbeelding verborgen is achter de foto's op de webpagina.

Experiment 3: De positie van de afbeeldingen

De standaard positie van de achtergrond (de positie als je niets opgeeft) is linksboven. Eén plaatje als achtergrond staat dus linksboven en standaard wordt er van linksboven getegeld.

Met de volgende declaratie kan je de positie instellen: figuur 3 background-position: x y;. Voor de x geef je de horizontale positie op, voor de y de verticale positie. Dit kan op verchillende manieren:

• Probeer enkele van de mogelijkheden uit.
  Je ziet de mogelijkheden het best als de background-repeat op no-repeat is gezet;
  maar kijk ook of je het effect ziet met een getegelde achtergrond (background-repeat: repeat).

Experiment 4: De grootte van de achtergrondafbeelding

Standaard wordt de achtergrondafbeelding niet vergroot of verkleind. Maar het is sinds css3 mogelijk om de afmetingen in te stellen met de declaratie hieronder:

figuur 4background-size: grootte;

Voor de grootte van de achtergrondafbeelding zijn er de volgende mogelijkheden:

• auto
  De afbeelding houdt zijn afmetingen. Dit is de standaardwaarde; die hoeft niet opgegeven.
• cover
  De afbeelding wordt zó groot gemaakt dat het hele venster gevuld is, zowel in de lengte als in de breedte.De breedte/hoogte-verhouding verandert niet. (Als de breedte bijvoorbeeld 2x zo groot is als de hoogte blijft dat zo). Er valt dan meestal een deel van de afbeelding buiten het venster.
• contain
  De afbeelding wordt zo groot mogelijk gemaakt binnen het venster.Ook hier verandert de breedte/hoogte-verhouding niet. In de ene richting is het venster dan precies gevuld, in de andere richting is er meestal een deel niet bedekt.
  
• percentage
  Een percentage van het scherm. Bij 50% passen er twee afbeeldingen naast elkaar, bij 25% vier.
• Pixels
  De breedte (en/of hoogte) in pixels
• Bij 'percentage' en 'pixels' kunnen twee waarden worden opgegeven (gescheiden door een spatie). De eerste waarde heeft dan betrekking op de breedte, de tweede op de hoogte.
  Stemt de verhouding van beide getallen niet overeen met de lengte/breedte verhouding van de afbeelding dan wordt de afbeelding in de lengte of breedte uitgerekt.

Voorbeelden

figuur 4a background-size: cover /* hele venster gevuld */; figuur 4b background-size: 50% /* er passen 2 afbeeldingen naast elkaar */; figuur 4c background-size: 400px /* afbeelding 400px breed */; figuur 4d background-size: 400px 200px /* afbeelding 400px breed en 200px hoog */;

• Experimenteer met background-size. Neem bv. polder2.jpg of duin1.jpg als achtergrond.
  Bekijk dit met background-repeat: repeat en background-repeat: no-repeat

Experiment 5: Het scrollen van de achtergrond

Met de eigenschap background-attachment kan worden ingesteld of de achtergrond al of niet mee scrollt met de webpagina:

figuur 5a background-attachment: scroll /* achtergrond scrollt mee - standaard waarde */ figuur 5b background-attachment: fixed /* achtergrond scrollt niet mee */

• Bekijk het effect van deze stijlregel.

Experiment 6: Een ruitjes-achtergrond

• Zorg dat het stijlblad terschelling.css er weer uitziet zoals figuur 1 (uiteraard zonder de regelnummers).
• Verander het afbeeldingsbestand in ruit.png. Regel 9 ziet er dan zó uit: figuur 6 background-image: url(../img/ruit.png);
• Controleer dat de achtergrond overeenkomt met het ruitespatroon van figuur 6a: figuur 6a

Het bestand ruit.png ziet er uit als figuur 6b. Ik heb het voor de duidelijkheid 5x vergroot: figuur 6b Het is niets anders dan een wit vierkant van 20px bij 20px met daarin een horizontale en een verticale lichtblauwe lijn. Als je die figuur horizontaal en verticaal herhaalt ('tegelt') dan krijg je een ruitjespatroon. De lijnen hoeven niet eens gecentreerd te zijn!
Zo kan je met een heel simpele figuur een achtergrond maken.

• Eventueel kan je ook hier nog experimenteren met de verschilldende vormen background-repeat en background-attachment.

Welke achtergrond?

Het is aan jou om te kiezen welke achtergrond je wilt:

• Wil je een achtergrond van zand? Dan zet je in regel 9 het bestand zand.png. figuur 7a 9background-image: url(../img/zand.png);
  10background-attachment:fixed;
• Wil je het ruitjespatroon? Dan zet je in regel 9 het bestand ruit.png figuur 7b 9background-image: url(../img/ruit.png);
  10background-attachment:fixed;
• Ik vind zelf een witte achtergrond het mooist. Als je dat ook vindt, laat je de regels 9 en 10 leeg. figuur 7c 9
  10

• Sla het stijlblad met de door jou gekozen achtergrond op.
• Zie ook de naslag achtergrondafbeeldingen

Verder

• De hoofdstukken 17 en 18 bevatten theorie.
• In hoofdstukken 19 gaan we verder met de opmaak van de website. Daarbij komt de theorie van hoofdstuk 17 en 18 van pas.