Met HTML en CSS kun je objecten op je website voorzien van een achtergrond afbeelding. Zo zou je een afbeelding kunnen instellen als achtergrond voor je hele website, je kunt ook een achtergrond afbeelding instellen voor een specifiek blok op je website (bijvoorbeeld de header).

Wanneer je afbeeldingen gebruikt als achtergrond dan kan dit je website een stuk aantrekkelijker maken (tenminste, als je mooie afbeeldingen gebruikt ;-).

Meer dan één achtergrond afbeelding

Wist je dat je website objecten ook meerdere achtergrond afbeeldingen tegelijk kunt geven? Zo kun je een hele mooie gelaagde achtergrond maken voor bepaalde blokken op je website. En je kunt er leuke effecten mee uithalen (bijvoorbeeld wanneer je met de muis boven zo'n blok zweeft).

Normaal gesproken geen je een object een achtergrond afbeelding door de CSS eigenschap background-image te gebruiken. Echter, wanneer je de eigenschap background gebruikt, dan kun je in één eigenschap meerdere waardes en attributen kwijt. Zo kun je met de eigenschap background in één keer aangeven of een afbeelding herhaald moet worden en wat bijvoorbeeld de achtergrond positie moet zijn.

In de onderstaande voorbeeld code zie je hoe de eigenschap background gebruikt wordt om een achtergrond afbeelding te laden, de afbeelding niet te laten herhalen en ook de positie van de achtergrondafbeelding wordt geregeld:

background:url(/images/plaatje1.jpg) no-repeat 10px 250px;

Je ziet dat het plaatje als bestandsnaam plaatje.jpg heeft en zich in de map images bevindt. Verder wordt de afbeelding niet herhaald (no-repeat) en staat het plaatje 10px van de linkerkant af en 250px van de bovenkant van het blok waar deze afbeelding de achtergrond van vormt.

Wanneer je nu een tweede achtergrond afbeelding zou toevoegen, dan zou de code er zo uitzien:

background:url(/images/plaatje1.jpg) no-repeat 10px 250px,url(/images/plaatje2.jpg) no-repeat top center;

Je ziet dat de code in principe gelijk is aan het eerste voorbeeld, maar na de background positie (10px 250px) heb ik een komma geplaatst en roep ik een tweede plaatje aan. Op deze manier kun je dus aan één object meerdere achtergrond afbeeldingen geven. Het is trouwens belangrijk welke afbeelding je als eerste aanroept. Het eerste plaatje komt bovenop te liggen. Wanneer je eerste plaatje dus groter is dan je tweede plaatje, dan kan het zijn dat het tweede plaatje niet getoond wordt. Je moet dan de volgorde even omdraaien.

Een video met een voorbeeld

Ik heb een video gemaakt waarin ik je precies laat zien hoe bovenstaande allemaal werkt en hoe je dus aan één blok op je website meerdere achtergrond afbeeldingen kunt toevoegen. Je kunt hieronder deze video bekijken:

Je zag in de video dat ik een div aanmaakte met de CSS class stars. Hieronder zie je de volledige CSS code:

.stars {
width:500px;
height:500px;
margin: 20px auto;
border:solid 1px #212121;
background:url(rocket.png) no-repeat 10px 250px,url(starbg.png) no-repeat top center;
transition:background-position 3s;
}

.stars:hover {
background-position:250px 10px,top center;
}

Je kunt deze code zelf gebruiken, pas alleen de bestandsnaam van de afbeeldingen aan en gebruik de namen van je eigen afbeeldingen.

Werkt dit ook in Joomla ?

Uiteraard werkt dit ook in Joomla. Hoe, dat ontdek je in de onderstaande video:

Ik wil dit toepassen in Wordpress, kan dat ?

Zeker, zie onderstaande video over het toevoegen van meerdere achtergrond afbeeldingen aan één object in Wordpress.

Hoe ga jij dit gebruiken ?

In het voorbeeld laat ik een raket wegvliegen, wanneer je met de muis zweeft boven een blok. Zo kun je dus leuke effecten krijgen wanneer je meerdere achtergrond afbeeldingen geeft aan een blok. Maar uiteraard kun je ook een hele andere vorm kiezen. Ik ben benieuwd op welke manier jij dit gaat toepassen op je website.

Heb jij deze techniek op een mooie manier toegepast op je website, of heb je daar goede ideeën over, laat het even weten in de reacties hieronder.

Plaats reactie

Beveiligingscode
Vernieuwen