Responsive Textbereich verkleinen gegenüber Overlay Image?

... komplette Frage anzeigen

1 Antwort

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.. 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von RarePepe
16.09.2016, 11:30

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

1

Was möchtest Du wissen?