Niquelao » Weblogarchief » Meerdere achtergrondafbeeldingen met CSS3

Tot nu toe konden we, als we meer dan één afbeelding als achtergrond wilden combineren, alleen maar gebruikmaken van sommige elementen op onze pagina en aan elk daarvan een achtergrond toepassen om het gewenste resultaat te verkrijgen. Soms voegden we zelfs extra markup toe, waardoor de kwaliteit van de website afnam doordat we markup uitsluitend voor presentatiedoeleinden gebruikten.

Maar nu verandert dat… Dankzij CSS 3 kunnen we, als we twee of meer achtergrondafbeeldingen willen gebruiken, aan de eigenschap background-image: het pad van elke afbeelding toevoegen, gescheiden door komma’s. Bijvoorbeeld: background-image: url(‘fondo1.png’), url(‘fondo2.png’) Met iets zo eenvoudigs als dit hebben we alles gedeclareerd wat nodig is zodat het element waarop we dit toepassen beide afbeeldingen als achtergrond krijgt. Natuurlijk rijzen vanaf dit punt nieuwe vragen… Overlappen ze elkaar?

Kunnen ze op verschillende plaatsen worden gepositioneerd? Kan de ene zich langs een as herhalen terwijl de andere dat niet doet? … …en op allemaal is het antwoord JA . Wat de overlapping betreft: de eerste afbeelding die wordt gedeclareerd, komt het dichtst bij de gebruiker te staan .

Direct daarachter (loodrecht op het scherm) volgt de volgende, dan weer de volgende, enzovoort, tot de laatste, die achter alle anderen komt te staan. Het is alsof elke afbeelding in een eigen laag wordt geplaatst . Als we bovendien een achtergrondkleur declareren, komt deze achter alle gebruikte afbeeldingen te staan.

Wat de overige vragen betreft, kan ik een algemeen antwoord geven, want ze zijn allemaal ontstaan doordat we dachten aan de eigenschappen die we gewoonlijk gebruiken, namelijk de positie van de achtergrondafbeelding ( background-position ), het gedrag bij scrollen ( background-attachment ) en herhaling ( background-repeat ). Als we voor elke afbeelding een specifieke waarde willen, hoeven we deze alleen maar opeenvolgend en gescheiden door komma’s te declareren (net zoals we dat deden bij het declareren van de afbeeldingen zelf).

Bijvoorbeeld: background-image: url(‘fondo1.png’), url(‘fondo2.png’), url(‘fondo3.png’); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; Hiermee declareren we drie achtergrondafbeeldingen: de eerste wordt linksboven geplaatst, de tweede verschuift 150px naar rechts en 200px naar beneden, en de derde wordt eveneens links en verticaal gecentreerd geplaatst. Wat herhaling betreft: de eerste en de laatste worden niet herhaald, terwijl de tweede zich horizontaal herhaalt.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Maar hier houdt het verhaal niet op. Voor wie graag code optimaliseert (en dat zouden we allemaal moeten zijn), kunnen sommige declaraties worden ingekort: background-position: 0 0, 150px 200px, left center; wordt: background-position: 0 0, 150px 200px, left; Het woord center valt weg.

Zoals we allemaal weten (of zouden moeten weten), wordt wanneer een van de waarden voor de achtergrondpositie niet wordt gedeclareerd, standaard de waarde center aangenomen, in dit geval verticaal. background-repeat: no-repeat, repeat-x, no-repeat; wordt: background-repeat: no-repeat, repeat-x; De derde waarde kan worden weggelaten. De reden hiervoor is dat wanneer er waarden ontbreken, de lijst met reeds gedeclareerde waarden wordt herhaald totdat er voor elke afbeelding één waarde is (vandaar dat, als de reeks waarden opnieuw begint, de eerste weer no-repeat is).

Maar het kan nog verder worden geoptimaliseerd, door gebruik te maken van de shorthand-eigenschap background: : background: url(‘fondo1.png’) 0 0 no-repeat, url(‘fondo2.png’) 150px 200px repeat-x, url(‘fondo3.png’) left no-repeat; Zoals jullie zien, opent dit allemaal een wereld aan mogelijkheden voor onze ontwerpen. Sommige browsers beginnen in hun huidige versies ondersteuning te bieden voor meerdere achtergrondafbeeldingen. Daartoe behoren Firefox (vanaf versie 3.6), Chrome , Safari en Konqueror .

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Als je een van deze gebruikt, kun je het resultaat bekijken in het voorbeeld dat ik heb voorbereid . Helaas is er nog geen ondersteuning in Internet Explorer (we zullen zien of ze dit in de toekomstige versie 9 opnemen) noch in Opera. Hieronder voeg ik een screenshot toe van wat er in het voorbeeld wordt getoond wanneer er ondersteuning is (als je een browser zonder ondersteuning gebruikt, zie je alleen de stippellijn): Afgezien van het bovenstaande bevat CSS 3 ook nieuwe waarden voor enkele van de genoemde eigenschappen, plus nieuwe eigenschappen die onze ontwerpen grote veelzijdigheid zullen bieden.

In een volgend artikel ga ik hier uitgebreid op in. Om alvast een tipje van de sluier op te lichten: noem ik background-size … ja, je raadt het al! Opmerking: Ik veronderstel dat, afgezien van de technische inhoud van dit artikel, het taartje op de foto het meest verleidelijk is .

Om jullie een beetje jaloers te maken: de foto is door mij gemaakt en het is een fruittaart die Dolores voor me heeft bereid… Het is duidelijk dat zij ook meester is in het beheersen van de presentatie, maar ik garandeer jullie dat ze ook inhoud perfect beheerst, want de taart was heerlijk… Meerdere achtergrondafbeeldingen met CSS 3 Categorie: CSS —> 4 reacties Meerdere achtergrondafbeeldingen met CSS 3 26 november 2009 […] nu verandert dat… Meerdere achtergrondafbeeldingen met CSS 3 […] Tweets die melding maken van Niquelao » Archief van het weblog » Meerdere achtergrondafbeeldingen met CSS3 — Topsy.com 27 november 2009 […] Deze post werd op Twitter genoemd door Jorge Rumoroso en Juanjo Fernández.

Juanjo Fernández zei: RT @rumoroso: #niquelao Meerdere achtergrondafbeeldingen met CSS 3 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » Archief van het weblog » CSS 3: Achtergrondeigenschappen 2 december 2009 […] ondersteuning in de meest recente browserversies (zoals ik al noemde in de getitelde entry Meerdere achtergrondafbeeldingen met CSS 3), soms zelfs experimenteel (bijvoorbeeld in Firefox via het prefix […] Niquelao » Archief van het weblog » Meer over CSS 3: background-origin en background-clip 13 december 2009 […] zoals ik in een ander artikel al uitlegde, kunnen we met CSS 3 meer dan één achtergrondafbeelding opnemen.

De eigenschappen background-origin en background-clip laten toe voor elk een waarde op te geven […] Je kunt de reacties volgen via de RSS 2.0-feed . Je kunt ook een trackback vanaf je eigen site versturen. Vorig artikel: Een extra stijltoets in de CSS-cursus Volgend artikel: CSS 3: Achtergrondeigenschappen —> —> —> Dit werk valt onder een Creative Commons-licentie .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.