Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS – achtergrond

Kleur

Vaak zul je de kleur van de tekst willen veranderen of moet een link een andere kleur krijgen als gewone tekst en kan het mooi uitkomen om h1 een andere kleur te geven als h2. Dit kan en wel als volgt:

H1 {color: red;}

Elke h1 krijgt nu als kleur rood. Zo simpel is het dus.

Background-color

Met background-color wordt de achtergrondkleur bepaald. Of het nu een h1 is of een p of een li maakt niet uit. Alle selectors uit het assortiment kunnen aan bod komen. Zeer bruikbaar bij het bepalen van de achtergrondkleur als je over een link gaat met je muis. Je hebt geen ingewikkelde technieken nodig om een leuk effect neer te zetten.

A:hover {
background-color: silver; 
color: black;
}

Als je over een link gaat in dit voorbeeld dan wordt de achtergrond zilver van kleur en de tekst wordt zwart.

[ad]

Background-image

Welke site maakt er geen gebruik van? Achtergrondafbeeldingen. Met behulp van css kan je de achtergrond afbeelding gaan bepalen. Zo hoef je maar eenmalig aan te geven welke afbeelding gebruikt dient te worden en vervolgens komt de afbeelding op elke pagina weer terug. Wil je dan later de afbeelding veranderen dan hoeft alleen het stijlblad aangepast te worden aan de nieuwe afbeelding en verder niet.

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

De body krijgt nu als achtergrond “afbeelding.gif”. Standaard zal de afbeelding continu herhaald worden, net als bij html het geval is. Dit omdat background-repeat van nature op repeat staat afgesteld.

Background-repeat

Gelukkig bestaat er een oplossing. Door de property background-repeat toe te voegen aan de stijldefinitie kan je bepalen hoe en hoe vaak de afbeelding herhaald moet gaan worden. Standaard staat background-repeat dus op repeat.

Mogelijke waarden:

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat

Repeat spreekt nu voor zich. De afbeelding wordt continu herhaald. Maar repeat-x zorgt ervoor dat de afbeelding alleen horizontaal herhaald wordt. Je krijgt dan een heleboel dezelfde afbeeldingen naast elkaar op de pagina. Repeat-y daarentegen laat de afbeelding verticaal herhalen. De afbeelding wordt dan steeds onder elkaar gezet. Maar als je wilt dat de afbeelding maar eenmalig gebruikt gaat worden op de pagina dan moet repeat-no als waarde toegevoegd worden. De afbeelding wordt dan slechts een keer gezet.

Background-attachment

Als je een achtergrond gebruikt op je pagina merk je dat de afbeelding meegaat als je naar beneden of boven scrollt. Niet altijd is dit even mooi. Door gebruik te maken van background-attachment kun je ervoor zorgen dat de afbeelding blijft staan en dat de pagina onafhankelijk van de afbeelding beweegt.

Mogelijke waarden:

  • scroll
  • fixed

Standaard is scroll. Wil je dat de afbeelding niet beweegt als je naar beneden scrollt dan moet je fixed toevoegen als waarde.

Body {
background-image: url("plaatje.gif"); 
background-attachment: fixed;
}

Nu zal de afbeelding blijven staan waar jij de afbeelding gedacht had en scrollt de pagina onafhankelijk van de afbeelding.

Background-position

Als je een mooie foto gebruikt op je pagina als achtergrond en je wilt deze op een bepaalde plek zetten dan kan background-position een zeer handig hulpmiddel blijken te zijn. Natuurlijk moet de afbeelding niet herhaald worden in dit geval. Background-repeat staat nu op no-repeat. De browser plaatst de afbeelding standaard links boven in de hoek. Hierbij horen de waarden: 0%, 0%.

Mogelijke waarden:

  • percentage
  • lengte in pixels
  • top
  • left
  • bottom
  • center
  • right

Ik gebruik hier percentages als hulpmiddel om de foto te gaan plaatsen. Andere manieren zijn mogelijk!

Body {
background-image: url("foto.gif"); 
background-repeat: no-repeat; 
background-position: 50% 50%;
}

De afbeelding zal in het midden van de pagina geplaatst worden.

Wil je de afbeelding links onder in de hoek krijgen, dan zet je 0%, 100% bij background-position. Wil je echter de afbeelding rechts onder in de hoek dan wordt het 100%, 100% als waarde.

Belangrijk is om uit de linker bovenhoek te redeneren. Je neemt eerst de horizontale uitlijning voor je rekening en vervolgens de verticale uitlijning. Oefening baart kunst.