Textbox auf einem Bild erstellen und zentrieren

toeltjen · 25. März 2019

Moin moin,

ich habe Probleme eine Textbox auf einem Bild zu erstellen und diese dann zu zentieren. Auch nach Anleitung aus dem Internet hat das nicht funktioniert! Das Bild ist im Laufe der Seite mittig ausgerichtet und in der Mitte des Bildes soll eine Box mit einer Überschrift, einem kleinen Textabsatz und einem Button sein.

Es soll am ende etwa so aussehen wie im Anhang.

ich bin über jede hilfe dankbar! Danke im vorraus.

Grüße aus Hamburg!

m.scatello · 25. März 2019

Dein Versuch dazu sieht wie aus?

toeltjen · 25. März 2019

Zitat von m.scatello

Dein Versuch dazu sieht wie aus?

Code

<div class="row">
            <div class="latest">
                <img src="resources/img/pic1.jpg" alt="alternative" />
                <h2>Titel</h2>
                <p>Lorem</p>
            </div>
        </div>

Code

.latest h2, p{
    background-color: #fff;
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    text-align: center;
    margin-left: 50%;
    transform: translate(-50%, 0%);
}

Die "Box" erscheint am unteren Bildschirmrand und ist in der höhe quasi auf eine reihe begrenzt

Sempervivum · 25. März 2019

Dazu gibt es zwei Ansätze:

Das Bild als Hintergrundbild, dann kannst Du mit Flexlayout die Texte problemlos zentrieren. Nachteil dabei: Der Container passt sich nicht an die Größe des Bildes an, sondern umgekehrt, man muss die Größe des Containers setzen und das Bild passt sich an. Seitenverhältnis bleibt außen vor.
Das Bild als img-Tag und die Texte absolut positioniert. Hier passt sich das Bild an die Größe des Containers an und das Seitenverhältnis bleibt erhalten. Nachteil ist die absolute Positionierung und dass die Zentrierung etwas kryptisch wird.

BTW: Dies ist ein klassicher Anwendungsfall für das figure-Tag:
https://wiki.selfhtml.org/wiki…Textstrukturierung/figure

Textbox auf einem Bild erstellen und zentrieren

Jetzt mitmachen!

Teilen

Tags