Image über Image fixieren

  • Ich habe ein Foto und möchte in der rechten unteren Ecke immer an der gleichen Stelle ein Herz anzeigen. Wenn ich die Browserbreite verkleinere und das Foto irgendwann anfängt sich responsive zu verkleinern springt das Herz aus dem Foto heraus. Kann man es irgendwie fixieren, damit es immer an der gleichen Stelle im Foto bleibt? Ich habe schon die verschiedensten position Angaben versucht, bringe es aber nicht hin.

    Code
    1. <div>
    2. <img src="foto.jpg" style="max-height: 400px">
    3. <img src="herz.png" style="position: relative; bottom: 15px; right: 50px; opacity: 0.7">
    4. </div>
  • Code
    1. <div class="row">
    2. <div class="left">
    3. ...
    4. </div>
    5. <div class="right" style="background-image: url('foto.jpg'); background-repeat: no-repeat; max-height: 400px">
    6. <img src="herz.png" style="position: relative; bottom: 15px; right: 50px; opacity: 0.7">
    7. </div>
    8. </div>

    Damit erhalte ich nur einen 1cm hohen Streifen von foto.jpg.

    Ändere ich max-height: 400px auf height: 400px ist das Foto ok, aber es ist nicht mehr responsive.


    Ich habe mal im Code den gesamten Aufbau skizziert: Es gibt eine row und darin 2 Blöcke nebeneinander. Im linken Block gibt es ein paar beschreibende Texte, im rechten Block das Foto dazu.

  • Zitat

    Ändere ich max-height: 400px auf height: 400px ist das Foto ok, aber es ist nicht mehr responsive.

    Das ist der Nachteil von Hintergrundbildern: Der Container passt sich nicht an das Bild an und es ist schwer reponsiv zu machen und Abschneiden oder verzerren zu vermeiden.

    Es gibt im wesentlichen zwei Varianten, um über ein Bild etwas darüber zu legen, die ich hier zusammen gestellt habe:

    https://jsfiddle.net/Sempervivum/k84scz1a/24/

    Statt Text ist es in deinem Fall ein weiteres Bild.

    Mit obsoluter Positionierung des Herzens solltest Du eigentlich zum Ziel kommen. In deinem ersten Code finde ich diese jedoch nicht, sondern nur relative Pos. für das Herz. Du musst dem Container das position: relative; geben und dem Herz ein position: absolute;.

  • Ich habe dein 2. Beispiel ausprobiert, aber mit der Positionierung rechts funktionierts nicht so recht beim Resizen - ev. bekommt man das mit media queries hin.

    Problemlos ist allerdings eine Positionierung links, das funktioniert bei jeder Breite.

    Ich denke, ich werde dem Kunden diese Variante vorschlagen!:)

    Danke für deine Infos!