CSS - Meerdere achtergronden toepassen op een enkel element


In een andere tutorial gaat het over het plaatsen van een achtergrond maar aanvullend is het ook mogelijk nog een stap verder te gaan. Sinds CSS 3 bestaat er namelijk de mogelijkheid om eenvoudig meerdere achtergronden te gebruiken. Dit kan toegepast worden op een element zoals een div maar ook op de body als de achtergrond van je website. Zodoende kun je bepaalde zaken uit je ontwerp eenvoudig combineren.

Het gebruik is eigenlijk vrij eenvoudig en gaat op een vergelijkbare manier als dat je een normale achtergrond zou instellen. Je stelt in feite de reguliere eigenschappen meerdere keren zoals je hieronder in de code ziet. Er worden twee bestanden aangeroepen en daaronder wordt twee maal aangegeven wat er met de afbeelding gedaan moet worden qua herhaling en er wordt aangegeven op welke positie de afbeelding moet beginnen.

div.background {
        background-image: url("images/back_1.jpg"), url("images/back_2.jpg");
        background-repeat:no-repeat, no-repeat;
        background-position:top left, 200px 0px;
}


Een voorbeeld hieronder. Dit is dus een enkele div met twee verschillende achtergronden.