CSS Div in Img positionieren?

[Dsimon24]

Hallo zusammen,

ich habe ein Bild auf einer Webseite und möchte innerhalb des Bildes (das geht über die gesamte
Breite und ist ca. 300px hoch) ein Div positionieren. In dem Div habe ich zwei Überschriften unter-
einander mit ein bisschen Schatten, Rahmen, Padding versehen.

Wie kann ich das am besten machen? Im Netz finde ich die Konstellation nur andersherum -
Img in Div platzieren - das ist aber nicht das, was ich brauche.

VG,

 

[Hancock]

Hmm

<div style="background:url('bild.png')">
<div style="margin:auto">
Text<br>text
</div>
</div>

wäre ein quick and dirty Lösung. Falls es ein <img src=".."> sein muss, geht das wohl am Besten mit Position:absolute.

 

[User007]

Hi...

Die Platzierung funktioniert dann nur über die CSS-Eigenschaft position:absolute, weil ein div-Tag im Gegensatz zum img ein Block- und nicht ein Inline-Element ist.

Es sollte eh für Beides jeweils ein DIV-Container benutzt werden, der dann konform und flexibel mittels CSS formatiert werden kann - z.B. mit dem Effekt des übereinander Platzierens > evtl. hilft diese Erklärung.

 

[breedmaster]

Damit sollte das auch möglich sein: https://css-tricks.com/snippets/css/complete-guide-grid/

 

[chris221177]

Das img-Tag darf kein child-tag besitzen. Das erklärt, weshalb das html anders aufgebaut werden muss.
Bei der Lösung von @Hancock geht natürlich Zusatzinformation, die ein Bild haben kann verloren. Das ist eventuell wichtig wenn es um Suchmaschinen Rankings geht.
Eine einfacher Lösungsansatz wäre:

<div style="position:relative;">
    <div style="position:absolue;...">
        <img src="" alt="" title""/>
    </div>
    <div style="position:absolue;...">
        <p>Text 1</p>
        <p>Text 2</p>
    </div>
</div>

Das ganze natürlich sauber mit Klassen und ohne inline styles.

 

[netzgestaltung]

also bei allen Lösungen hier mus darauf geachtet werden, das die Höhe des Textes nie größer als die des Bildes wird. Meiner Erfahrung nach ist das mit verschiedenen Bildschirmgrößen und unterschiedlichen Texten quasi unmöglich. Daher würde ich das immer als Hintergrundbild lösen. Da die Bildadressen in den meisten Systemen in der DB liegen und nicht im CSS verfügbar sind, als inline-styles.

.post-header{
  position:relative;
  padding:2em;
  min-height:300px;
}
.post-header > *{
  position:relative;
  z-index:10;
}
.post-thumbnail{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  z-index:5;
}
.post-thumbnail img{
  display:none;
}

<header class="post-header">
  <div class="post-thumbnail" style="background-image:url(https://domain/to/normal/image.jpg);">
    <img src="https://domain/to/smallest/image.jpg" loading="lazy" alt="Das ist die Bildbeschreibung" />
  </div>
  <h1>Das ist der Titel</h1>
  <p>Das ist die Subheadline</p>
</header>

JSFiddle

Ich behalte das Bild aus SEO gründen dennoch im Quellcode, am besten mit alt und loading="lazy" Attributen.

Das Bild wächst nun mit dem Inhalt und das ganze ist voll Responsive und die Proportionen passen immer. Dafür wird das Bild beliebig am Rand abgeschnitten. DH man muß bei der Bildwahl darauf achten, dass das Bild genug "Fleisch" rund ums Motiv hat.

Das ganze habe ich nun noch mit einer min-height versehen. Falls mal weniger Text da steht ist das der Ausgangspunkt der Höhe.