CSS: Afbeeldingen op juiste plek krijgen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Innovatieve, nauwkeurige Senior PHP Developer voor

Eind jaren ’90 is dit bedrijf opgericht. Ze hebben zich altijd beziggehouden met het ontwikkelen van software voor overheidsinstanties. Dit zijn instanties waaronder bijvoorbeeld ook onder andere : de belastingdienst, burgerszaken, verschillende bedrijven, notarissen, incassobureau’s en ook nog bewindvoerders. Momenteel tellen ze 20 medewerkers, waarvan 2/3 deel allemaal developers zijn. Doordat ze de enigste aanbieder van dit soort software op de markt zijn, groeien ze erg hard. Door de enorme groei, hebben ze dan ook concrete groeiplannen in het verschiet. Functie-omschrijving Het bedrijf wordt door allerlei instanties ingeschakeld. Tegenwoordig wordt alles digitaal geregeld en gezien de essentie van dit soort

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

15/02/2019 21:19:00
 
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.