CSS: Afbeeldingen op juiste plek krijgen
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
Gewijzigd op 08/02/2019 13:16:44 door Fanny Schouten
Code (php)
1
2
3
4
2
3
4
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#black {
display: flex;
height: 50px;
width: 100%;
background-color: black;
}
#boy_img {
flex-grow: 1;
left: 0;
z-index: 10;
}
#spray-img {
flex: 1;
}
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.
Gewijzigd op 08/02/2019 17:42:29 door - Ariën -