CSS2 – Background-position

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 rest ons nu nog om nog even iets beter te gaan kijken naar de mogelijkheden van background-position.

Je kunt verschillende waarden invoeren voor background-position.

Je kunt de namen invoeren als bijvoorbeeld 'left top', 'right top'

'center center'. Je moet wel altijd deze volgorde trouwens aanhouden.

En als je maar één waarde kiest, dan wordt voor de andere waarde altijd een default waarde genomen.

Naast de namen kun je ook de procenten invoeren.

Als je niks invoert dan is % voor de x-s en % voor de y-as de default waarde.

En met x-as wordt de horizontale verplaatsing bedoeld en met de y-as de verticale verplaatsing.

Je kunt ook een x- of een y-positie opgeven. Dat kun je dan bijvoorbeeld opgeven in pixels.

pixels is dan de default waarde voor zowel de x- als de y-as.

En als je maar één waarde opgeeft dan wordt voor de andere altijd % aangehouden.

Dit passen we ook weer toe in ons voorbeeld document.

Allereerst verwijder ik de huidige achtergrondafbeelding van de 'mainheader'.

En wil ik deze zometeen gaan vervangen door de afbeelding die nu op de regel staat.

Dit is een inline-block-element. Hij staat op de regel samen met 'House-of-Training' in de html broncode.

Doordat deze op de regel staat ben ik veel minder vrij om deze te positioneren waar ik wil.

Daarom ga ik deze vervolgens plaatsen als een background-image van de 'mainheader'.

Eerst verwijder ik de afbeelding uit de html broncode.

En vervolgens plaats ik deze afbeelding als zijnde een background-image'.

Standaard wordt een achtergrondafbeelding herhalend geplaatst, dus als een patroon.

Om ervoor te zorgen dat ik deze afbeelding maar één keer ga zien.

gebruik ik de eigenschap background-repeat : no-repeat.

Nu wordt deze afbeelding slechts eenmaal getoond.

Vervolgens kan ik deze positioneren met de eigenschap background-position.

Met de eerste waarde bepaal je dus de x-as, de horizontale verplaatsing.

Oftewel wil ik hem naar links, rechts of gecentreerd. Ik plaats hem nu in eerste instantie naar right.

Met de tweede waarde kun je de afbeelding verplaatsen op de y-as. Oftewel de verticale positie bepalen.

Dat kan dus met top, center of bottom. en ik plaats deze op 'bottom'.

Je kunt de positie ook bepalen in procenten.

Dus bijvoorbeeld horizontaal wil ik hem verplaatsen naar %.

En verticaal wil ik hem bijvoorbeeld verplaatsen naar %.

En je kunt ook nog positioneren met een absolute maateenheid.

En dat kun je doen door pixels aan te geven. Dus voor de horizontale verplaatsing,

wil ik dan bijvoorbeeld dat deze pixels verplaatst wordt.

En verticaal wil ik dan bijvoorbeeld dat hij pixels naar beneden komt te staan.

Zo ben je dus in staat om de positie van een background-image heel precies te bepalen.

Meestal als je een positieve waarde kunt invoeren, kun je ook een negatieve waarde invoeren.

Dat geldt in deze situatie ook. Alleen de box is wel het enige gebied waar binnen deze afbeelding zichtbaar is.

Dus als ik bijvoorbeeld de positie op - pixels zet.

Dan is deze gedeeltelijk niet zichtbaar en als ik hem nog verder verplaats naar - pixels, bijvoorbeeld.

Dan loopt hij steeds verder uit beeld. Maar hij komt ook niet meer in beeld buiten de box. Dus hij verdwijnt in principe.

Maar is wel een mooie manier waarop je een afbeelding gedeeltelijk kunt tonen binnen een box.