Hallo allemaal,
ik heb een vraag over hoe ik de afbeelding in mijn bovenbalk responsive kan maken, dit bij het gebruik van 2 verschillende formaten afbeeldingen.
Bij gebruik van 1 afbeelding is het geen probleem, omdat ik dan de code gebruik van width: 100%; en height: auto; Bij 2 afbeeldingen werkt dit helaas niet.
Hieronder de code hoe ik nu wel 2 verschillende afbeeldingen krijg bij het verkleinen van het scherm van desktop naar mobile formaat, maar deze afbeeldingen zijn helaas niet responsive...
wie heeft een idee om deze afbeeldingen wél responsive te krijgen?
Html:
<div id="balkboven">
</div>
CSS:
#balkboven {
width: 100%;
height: 519px;
background-repeat: no-repeat;
background-image: url(../afbeeldingen/kopfa.jpg);
}
@media screen and (max-width: 450px) {
#balkboven{
background-repeat: no-repeat;
background-image: url(../afbeeldingen/kopfaphone2.jpg);
}
}