CSS: Afbeeldingen op juiste plek krijgen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Fanny Schouten

Fanny Schouten

08/02/2019 13:11:59
Quote Anchor link
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.

https://fannyschouten.nl/wp-content/uploads/2019/02/div.png

Wat is een goede manier om dit te doen?

Groet, Fanny
Gewijzigd op 08/02/2019 13:16:44 door Fanny Schouten
 
PHP hulp

PHP hulp

24/04/2019 19:02:47
Honeypot
 
Rob Doemaarwat

Rob Doemaarwat

08/02/2019 15:08:53
Quote Anchor link
Wat heb je al?
 
Fanny Schouten

Fanny Schouten

08/02/2019 15:23:49
Quote Anchor link
HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


De afbeeldingen staan in het onderste zwarte DIV'je.
Gewijzigd op 08/02/2019 17:42:29 door - Ariën -
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.