CSS2 – Background-color, -image en -repeat

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

In deze video behandelen we eerst de mogelijke toepassingen met achtergrondafbeeldingen van CSS.

In de volgende video behandelen we de specifieke nieuwe eigenschappen van CSS.

Deze nieuwe eigenschappen hebben namelijk ook gevolgen voor de oudere css eigenschappen. Dus behandel ik deze eerst.

Allereerst zie je hier de volledige lijst met waarden voor de eigenschap 'background' in css.

De eerste drie background-eigenschappen 'color', 'image' en 'repeat'.

Hebben weinig uitleg nodig en ik laat direct een toepassing hiervan zien in een voorbeeld document.

Open de index.html die behoort bij deze video en bekijk eerst even een voorvertoning in de browser.

Bovenin het document bevindt zich een 'header'.

En deze heeft in de html broncode een class gekregen namelijk 'mainheader'.

En hierin ga ik een achtergrondafbeelding toepassen.

Zoek in het bijbehorende stijlblad de class 'mainheader' op. En plaats daar vervolgens de eigenschap background-image.

Dan volgt de url naar het betreffende bestand. En in de local root folder staat een mapje 'img'.

En daarin bevindt zich een bestand dat heet 'bg.png' en die kun je hiervoor gebruiken.

De achtergrondafbeelding wordt standaard herhalend toegepast, net als een patroon.

Om dit aan te passen keer ik terug naar mijn stijlblad.

En plaats ik de eigenschap 'backrgound-repeat'. En deze zet ik nu eerst op 'no-repeat'.

Dan wordt de afbeelding slechts één keer getoond.

En deze achtergrondafbeelding wordt getoond vanaf de kaderrand, de border. Maar wel achter de padding van de box.

Ik kan er ook voor kiezen om alleen maar horizontaal te herhalen en dat doe ik met de opdracht 'repeat-x'.

Of alleen maar verticaal te laten herhalen en daarvoor gebruik je de waarde 'repeat-y'.

Je kunt aan elk element background-images verbinden.

Dus zowel block-, inline- als inline-block-elementen.

Dus als ik aan een kop, bijvoorbeeld de h, een achtergrondafbeelding wil toepassen. Dan kan dat.

Dan zal de box van de h gevuld worden met een repeterende achtergrondafbeelding.

In dit voorbeeld document staan er in de artikelen, met behulp van een 'span', inline-elementen.

Die hebben de class="borderradius" gekregen. Ook deze vind je terug in het stijlblad.

En deze zou je kunnen voorzien van dezelfde background-image.

In dit geval is deze achtergondafbeelding niet echt geschikt om te verbinden achter teksten.

De tekst wordt daardoor bijna niet meer leesbaar.