CSS3 – Background-size, cover & contain

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.

Dan heb je ook nog de waarde 'cover'.

Met deze waarde zorg je ervoor dat altijd proportioneel, de afbeelding wordt vergroot of verkleind. Dat kan ook.

Totdat deze zichtbaar is in de volledige ruimte. In dit geval is dus een deel van de breedte van de afbeelding weggevallen.

Omdat deze dusdanig vergroot moest worden dat in ieder geval ook de hoogte de beschikbare ruimte bedekte.

Als ik nu het venster breder maak. Dan komt langzamerhand de afbeelding tevoorschijn die zojuist gedeeltelijk was weg gevallen.

Dan hebben we ook nog de waarde 'contain'.

Deze lijkt op 'cover'. Ook nu wordt er proportioneel vergroot of verkleind.

Totdat deze in ieder geval in de hoogte of in de breedte past.

Maar met 'contain' wordt er nooit een deel van de afbeelding weg 'geclipt'.

Als ik nu mijn venster ga vergroten, dan scheelt deze ook automatisch weer mee.

Maar sowieso wordt altijd de hele afbeelding getoond.

Een praktische toepassing van background-size.

Is als je bijvoorbeeld één grote achtergrondafbeelding wilt gebruiken als achtergrond voor je website.

Open hiervoor de 'indexbg.html' uit de local root folder.

Bovenin mijn stijlblad maak ik een selector aan voor de html 'html', accolade openen, accolade sluiten.

Dit doe ik omdat ik dan zeker weet dat de afbeelding op de achtergrond komt.

Je kunt hier natuurlijk ook de 'body' selector voor gebruiken.

Maar voor het overzicht gebruik ik meestal de html-selector.

In de local root folder staat een afbeelding die is voorbereid op een monitor resolutie van bij .

Maar als je wilt dat deze afbeelding altijd volledig elk scherm bedekt, kies je natuurlijk voor het huidige grootste schermformaat.

Ik plaats de achtergrondafbeelding met de eigenschap 'background-image'.

In de local root folder staat in het mapje 'img' 'bg-large.jpg' en die kun je hiervoor gebruiken.

Vervolgens zorg ik ervoor dat de achtergrond niet gerepeteerd wordt en dat doe je met 'background-repeat : no-repeat'.

Dan wil ik dat deze proportioneel, maar wel beeldvullend, geplaatst wordt.

En daarvoor gebruik ik de background-size met de waarde 'contain'.

Het voordeel van de waarde 'contain' is dat deze nooit afbeeldings gegevens 'wegclipt'.

Het nadeel is wel dat op het moment de bezoeker het browservenster smaller maakt.

De afbeelding ook smaller wordt. En dan is er dus kans dat je op een gegeven ogenblik lege ruimte ziet. En dat is dan weer jammer.

Dan zou je er bijvoorbeeld voor kunnen kiezen om niet 'contain', aar bijvoorbeeld 'cover' te gebruiken.

Met 'cover' wordt altijd de volledig de beschikbare ruimte gebruikt.

En in dit geval alle ruimte van de pagina.

Als ik naar beneden scroll. Dan is hier de onderkant van de foto en dit is de bovenkant van de foto.

Hij is dus nu enorm opgeblazen.

Dit kan natuurlijk ook zijn wat je wilt, maar als dit niet is wat je wilt.

Want je wilt bijvoorbeeld dat de afbeelding alleen maar binnen de viewport getoond wordt.

En dus niet alle beschikbare ruimte benut van de webpagina, zolang als de webpagina is.

Dan gebruik je hiervoor een volgende eigenschap. En dat is namelijk de background-attachment.

Dan gebruik je hiervoor een volgende eigenschap. En dat is namelijk de background-attachment.