CSS: Afbeeldingen op juiste plek krijgen

Door Fanny Schouten op 08-02-2019 13:11 gewijzigd op 08-02-2019 13:16

1.717 views

Hallo allemaal,

Ik heb geen idee hoe ik mijn afbeeldingen op de juiste plek moet krijgen voor mijn schoolopdracht. Meerdere dingen geprobeerd, maar omdat het responsive moet zijn - krijg ik het niet kloppend voor alle schermen.

Dit moet gedaan worden met CSS (natuurlijk ;-)). Het gaat om het jongetje en de 'wolk' ernaast (zie afbeelding), dit zijn twee losse afbeeldingen die dus over en achter elementen komen te staan.

Wat is een goede manier om dit te doen?

Groet, Fanny

Rob Doemaarwat

08-02-2019 15:08

Wat heb je al?

Fanny Schouten

08-02-2019 15:23 gewijzigd op 08-02-2019 17:42

HTML:


<div id="black">
<div id="boy_img"><img src="Afbeeldingen/footer-boy-xl.png" alt="image of boy" width="50%"></div>
<div id="spray_img"><img src="Afbeeldingen/spray-xl.png" alt="image of spray" width="50%"></div>
<div>

CSS:


#black {
display: flex;
height: 50px;
width: 100%;
background-color: black;
 }
 
#boy_img {
flex-grow: 1;
left: 0;
z-index: 10;
}

#spray-img {
flex: 1;
}

De afbeeldingen staan in het onderste zwarte DIV'je.

Reageren

Inloggen om te reageren