CSS3 – Multiple backgrounds

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.

Je kunt meerdere achtergrondafbeeldingen over elkaar heen plaatsen en ik doe dat voor in dit voorbeeld document.

Op deze pagina is al een achtergrondafbeelding toegepast.

Deze wordt altijd beeldvullend getoond, dankzij de css-eigenschappen 'background-size' en background-attachment'.

Met de 'background-attachment : fixed', zorg je ervoor dat de viewport van het apparaat van de gebruiker.

En dus het browser venster als totaalformaat wordt gezien.

En met 'background-size : cover', zorg je ervoor dat het totale gebied proportioneel gevuld wordt met de afbeelding.

Beeldmateriaal wat dan niet meer past in dit totaal gebied wordt weggesneden.

En de eigenschap 'background-repeat' op 'no-repeat', zorgt ervoor dat er slechts één afbeelding getoond wordt.

Stel dst ik nu bovenop deze achtergrondafbeelding een patroon wil tonen.

Dan wil ik hiervoor nogmaals een achtergrondafbeelding voor gebruiken.

Onthoud dat de eerst geplaatste afbeelding in de css-code bovenop komt.

En de daarna volgende afbeeldingen respectievelijk eronder.

Ik plaats dus het patroon bovenop de huidige achtergondafbeelding, door deze als eerste waarde te plaatsen.

In de css-eigenschap 'background-image'.

Door de komma ziet de browser dit als twee aparte afbeeldingen.

Omdat ik nu twee afbeeldingen heb geplaatst voor background-image.

Zal ik ook voor de overige background eigenschappen de '-repeat, -size en -attachment', aparte waarden moeten invoeren.

Ook nu kun je dus de waarden voor de eerste en de tweede aangeven door de komma.

Dus voor de eerste afbeelding geldt dat ik deze juist wil laten herhalen met de waarde 'repeat' en dan komma...

om de volgende waarde af te scheiden.

Vervolgens voor background-size. Als je deze niet wilt vergroten of verkleinen.

En je wilt de originele beeldformaat aanhouden, kun je hiervoor 'auto' gebruiken.

Komma, om de gegevens te scheiden.

En als background-attachment zet ik hem in eerste instantie even op 'scroll' en dan weer de komma.

Dat levert dit eindresultaat op. Als ik mijn venster breder maak.

Wordt het patroon keurig netjes herhalend toegepast. Als ik nu naar beneden ga scrollen.

Dan scrollt dit patroon met mijn pagina mee. Als ik dit vast wil zetten.

Dan gebruik ik dus niet de waarde 'scroll' maar ook de waarde 'fixed'.

Als ik nu naar beneden scroll, staat ook dit patroon stil op de achtergrond.

Als de waarde van een bepaalde eigenschap voor alle achtergrondafbeeldingen geldt , zoals in dit geval nu.

De background-attachment, twee keer op 'fixed' staat.

Kan je er ook aan voldoen om deze slechts maar één keer te plaatsen.

Dan wordt deze waarde vervolgens voor alle achtergrondafbeeldingen aangehouden.