CSS Position von div-boxen auf Hintergrundbild?

... komplette Frage anzeigen

2 Antworten

Kommt auf deinen Inhalt an. div Container kannst du mit Prozent angeben, dann hat sich das für die weitgehend erledigt.

div {
width: 20%;
height: 200px; // für die Höhe musst du Prozent erst noch definieren
}

Antwort bewerten Vielen Dank für Deine Bewertung
<div class="cover">
<div class="box">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere autem quasi deleniti aliquam cumque sed sit assumenda blanditiis consectetur omnis, labore unde quam nihil ipsam expedita maiores non? Dicta, consequuntur?
</div>
</div>
.cover {
height: 100vh;
background: url("path/image.jpg") no-repeat center;
background-size: cover;
}
.cover .box {
attribute: value;
}

Die im Eltern-Element liegenden Boxen dann einfach wie gewünscht mit dem Box oder Flex-Modell positionieren. Alternativ dem Eltern-Element ein position: relative zuweisen und den Rest dann über position: absolute ausrichten. Auf letzteres jedoch weites gehend verzichte. 

Was die unterschiedliche Größen angeht, mit relativen Werten arbeiten und dich mit Media Queries anfreunden. Darüber kannst du wunderbar das Aussehen an die unterschiedlichen Viewports anpassen. Gerade mit dem Flex-Modell einiges geht. 

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?