CSS2 – Background-attachment

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.

De eerstvolgende background-propertie na 'repeat' is 'attachement'.

Hiermee kun je een achtergrondafbeelding laten fixeren.

Of de optie geven om mee te laten scrollen met de pagina.

Standaard scrollt de achtergrondafbeelding alijd mee met de pagina.

En ik behandel nu eerst de waarden 'scroll', de Default waarde en 'fixed'. En dat laat ik weer zien in ons voorbeeld document.

Ik wil een patroon gaan gebruiken als achtergrond voor mijn hele website.

Ik zou daar natuurlijk ook het body-element voor kunnen gebruiken.

Maar als ik die misschien later toch nog ergens anders voor wil inzetten. Kan ik nu ook nog terugvallen op het html-element.

Weet ik zeker dat in ieder geval de hele browser venster gevuld gaat worden met deze afbeelding.

En ik plaats daarvoor de background-image. Met de url, in de map 'img' staat het bestand 'bg.png'.

En ik pas deze eerst gewoon toe.

Als ik nu ga scrollen dan zie je dus dat de achtergrondafbeelding mee scrollt op de pagina. Dat is ook de default waarde.

Dan maak ik nu gebruik van de eigenschap background-attachment en deze zet ik op 'fixed'.

Als ik nu mijn pagina naar beneden scroll, dan staat de achtergrondafbeelding stil. Deze is gefixeerd.

Aan de eigenschap background-attachment en de waarde 'fixed' zit nog wel een addertje onder het gras.

En dat maak ik duidelijk in het volgende.

Allereerst wissel ik even de achtergrondafbeelding van de html.

Naar de 'bg.png' en voor de h gebruik ik nu de 'bg.png'.

De achtergrondafbeelding van de h ga ik vervolgens alleen maar horizontaal laten herhalen.

En dat doe je met background-repeat en dan kies ik voor 'repeat-x'.

Nu wordt deze alleen nog maar horizontaal herhaald.

Als ik nu naar beneden scroll, dan blijft deze achtergrondafbeelding keurig achter de h staan.

Kies ik nu voor de waarde 'background-attachment:fixed'.

Dan lijkt deze afbeelding ineens verdwenen. Dat is niet zo.

Deze afbeelding komt weer tevoorschijn als ik naar beneden scroll.

En dan zie je dat de 'fixed' positie altijd gebaseerd wordt op de viewport.

En de viewport is ook mijn browservenster.

De background-image blijft echter wel alleen maar voorbehouden voor de h waaraan hij is verbonden.

Dus als ik nu verder scroll en ik scroll op een gegeven ogenblik met de h uit beeld.

Dan verdwijnt dus ook de weergave van mijn achtergrondafbeelding.

De waarde 'fixed' is maar voor heel weinig doeleinden toepasbaar.

Als ik een achtergrondafbeelding wil gebruiken voor mijn hele webpagina.

Dan is deze toepasbaar omdat je dan ook juist de viewport als uitgangspunt neemt.

Dan heb je voor background-attachment ook nog de waarde 'local'.

En die leg ik uit met een ander voorbeeld. Dan haal ik eerst deze background-image bij de h weer weg.

En dan gebruik ik dit eerste artikel om de volgende eigenschap uit te leggen. Zoek in het stijlblad naar de class 'article'.

En dan wil ik deze alleen maar gaan toepassen op het eerste artikel. En daarvoor kun je dus een aparte stijl schrijven.

En dat is dan class 'article' met de pseudo-class ':first-child'.

En het eerste wat ik ga doen is deze een 'height' meegeven van pixels.

Dan wordt het kader ingekort. Om te zorgen dat de overlopende tekst getoond kan gaan worden met een scrollbalkje.

Moet ik nog een overflow gaan aangeven. En deze zet ik op 'auto'.

Dan zal er in ieder geval daar waar nodig een scrollbalk verschijnen.

In dit geval dus alleen aan de rechterkant. Vervolgens plaats ik opnieuw een background-image.

Deze wil ik alleen maar horizontaal laten herhalen met 'background-repeat : repeat-x'.

Deze wordt dan keurig netjes op de default positie, links boven, geplaatst.

Dit kan ik ook wijzigen door zelf de positie te bepalen en dat doe je met een background-position.

Kies ik voor de x-positie en voor de y-positie, dat is de verticale verplaatsing, voor pixels.

Vervolgens laat ik het verschil zien tussen de waarden voor background-attachment 'scroll' en 'local'.

En ik begin met de waarde 'scroll'.

Als ik de overlopende tekst wil lezen en ik scroll naar beneden, dan blijft de achtergrondafbeelding op dezelfde positie staan.

En als ik vervolgens kies voor 'local'.

En als ik nu vervolgens naar beneden scroll, dan scrollt het element mee.

Op de positie van de pagina, waarop deze gepositioneerd is.