Les 3: Kleuren en achtergrondplaatje

Kleuren kun je op meerdere manieren aangeven

• Er zijn ingebouwde kleuren zoals red, green, blue en veel meer Kijk voor meer kleurnamen hier: w3schools kleuren

• Je kunt de RGB waarde van een kleur opgeven. (We leggen RGB zo uit).

  • rgb(0, 51, 153)

  • rgb(0%, 25%, 71%)

  • #00AF32 of #A02 (dit is #AA0022)

body {
  color: darkblue;  /* color  verandert de tekstkleur*/
  background-color: lightgrey;
} 

p, h1, h2 { /* gebruik deze stijl voor p, h1 en h2 tegelijk*/
  color: rgb(0, 51, 153);
  background-color: #00FA32;
} 

RGB staat voor Red Green Blue

Je geeft steeds aan hoeveel rood, groen en blauw je wilt. De kleur is dan de mix die jij aangeeft.

In #00AF32 zie je ook letters. Je gebruikt dan hexadecimale getallen. De volgorde daarvan is: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Als je goed telt zijn er dus 16 waardes mogelijk.

0 betekent niets van de kleur en F juist zo veel mogelijk.

rgb(0, 51, 200) Getallen van 0 t/m 255; 0 is niets, 255 maximaal Mix hier geen rood, beetje groen en veel blauw #00AF32 Gebruik twee karakters per kleur geen rood (00), veel groen (AF) en beetje blauw (32) Kijk voor meer kleurcodes op:

• http://www.katinkahesselink.net/webvisie/css_kleur_tabel.htm
• https://www.google.com/search?q=color+picker
• https://www.w3schools.com/colors/colors_picker.asp

Je kunt als achtergrond ook een plaatje gebruiken op je website.Je gebruikt dan de eigenschap background-image.

body {
    background-image: url("plaatje.gif");
} 

Standaard zal je plaatje niet één keer getoond worden; het plaatje wordt herhaald. Dus naast elkaar en daarna ook onder elkaar. Als je dat anders wilt kan dat!

Je kan het plaatje ook op een andere plek zetten met background-position Je kunt uitlijnen met bijvoorbeeld right / left en top

body {
  background-image: url("plaatje.gif");
  background-repeat: no-repeat;
  /* Eerst rechts links, dan boven beneden */
  background-position: right top;
} 

Je kunt ook een positie in pixels of in procenten weergeven.

/* positie: 50% van de breedte en 40 pixels van boven */
background-position: 50% 40px;

Je plaatje niet laten meebewegen als je scrollt:

background-attachment: fixed;  /* zie: voorbeeld */

Opdrachten

[1] Geef de elementen in je pagina verschillende kleuren. Oefen met de drie verschillende manieren om kleuren aan te geven.

[2] Voeg een achtergrondplaatje toe aan je website. Kun je ervoor zorgen dat:

• Het plaatje maar één keer getoond wordt,

• Niet mee scrolt met de pagina,

• Op een andere plek komt?

[3] Maak de opdracht in repl.it