Frage von RarePepe, 12

Responsive Textbereich verkleinen gegenüber Overlay Image?

Hallo Leute, ich habe folgendes Problem.

Ausgangssituation:

Ich benutze Bootstrap um eine Seite zu bauen.

Was es tun soll:

Ich möchte gerne einen Textbereich mit einem Bild überlagern das verschwindet sobald man mit der Maus drüber geht, das Bild soll responsive sein, und der Textbereich soll genau das gleiche machen wie das Bild d. h. der Textbereich soll auf jeder Bildschirmgröße so groß wie das Bild sein.

Ich möchte es nicht mit fester Höhe machen, da es sonst auf nicht standardisierten Bildschirmgrößen zu groß ist.?

Kleiner Ausschnitt:

Auflösung : 1920px * 1080px

.startseite div img{ position: absolute; z-index: 2; }

.startseite .thema_container{ height: 357px !important; background: $farbe; padding: 0px; color: #fff; }

<div class="col-lg-3 thema_container">
<a href="">
<img>
</a>
<h2></h2>
<div class="col-lg-12 thema_text_container">
<ul><li></li></ul>
</div>
</div>

Das Bild ist also 357px hoch.

Der Textinhalt ist allerdings nicht so hoch.

Ergo kann ich height: auto; bzw height: 100%; vergessen.

mit Padding: irgendwas %; komm ich ebenfalls nicht weit.

Kann mir da jemand helfen?

Gruß RarePepe

Antwort
von MonkeyKing, 9

Wie wäre diese Struktur:

<div class="container">
  <div class="img"></div>
  <div class="txt">hier dein Text</div>
</div>

wobei auf dem "img" div dann das Bild als Hintergrund hinterlegt ist, etwa so:

.container { position: relative; width: 100%; height: 100% }
.img {position: absolute; width: 100%; height: 100%; background-image: url(deinbild.png);background-size: cover; }
.text {position: absolute; width: 100%; height: 100%; }

also nur so skizziert.. 

Kommentar von RarePepe ,

man füge noch ein z-index: 2; bei .img hinzu und ein .container:hover .img{display: none;} hinzu und es funktioniert wunderbar. Danke sehr. Das ich da nicht früher drauf gekommen bin -.- wp internet

Keine passende Antwort gefunden?

Fragen Sie die Community