CSS: Afbeeldingen op juiste plek krijgen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Developer / Innovatieve software / Virtual Re

Functieomschrijving Als .Net developer werken aan innovatieve software waar onder andere gebruik gemaakt wordt van Virtual Reality? Bijdragen aan een organisatie waar je uitgedaagd wordt om continu verbeteringen en ontwikkelpunten te ontdekken en door te voeren? Werken in de omgeving Putten? Reageer dan nu voor meer informatie! Het pro-actief aandragen van verbeteringen voor de bestaande applicatie; Ontwikkelen van nieuwe functionaliteiten; Doorvoeren van aanpassingen en wijzigingen; Verantwoordelijk voor koppelingen met andere systemen; Op de hoogte blijven van technische ontwikkelingen. Functie-eisen Hbo werk- en denkniveau; Een afgeronde IT gerelateerde opleiding; Minimaal 1 jaar professionele ervaring als developer; Aantoonbare kennis van C#; Initiatiefrijke

Bekijk vacature »

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

17/08/2019 13:48:14
 
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.