[ERLEDIGT] Bilder auf Bild fest ausrichten

[Gelöschtes Mitglied 35303]

Hallo,
ich habe folgendes Vorhaben: Es gibt ein Hintergrundbild (hat die Eigenschaft background-attachment: fixed; bekommen (in Skizze Bild 1)), auf dem drei Bilder (in Skizze Bilder 2-4) liegen sollen. Diese Bilder müssen exakt auf jedes Pixel genau an das Hintergrundbild angepasst sein. Zunächst sollen sie nicht sichtbar sein, sondern nur der Hintergrund. Später, beim Mouseover sollen diese dann angezeigt werden.
EDIT: Einfache Skizze am Anhang.

Wie kann ich das am besten realisieren? Das mouseover sollte ich mit JavaScript hinkriegen, Stichwort display: block und none, aber wie kann ich die Bilder auf den Hintergrund anpassen? Also das sie an einer exakten Stelle am Hintergrund verbleibt?

Danke vielmals für Eure Hilfe.
:)

 

[LeCub]

Du kannst bein den Bildern mit margin und transform arbeiten, wirst es aber nicht schaffen dass auf jeder Bildschirmgröße die Bilder

exakt auf jedes Pixel genau

angeordnet sind

 

[djheke]

Dein umgebenes Element(div) braucht position:relative. Deine Bilder(img) bekommen position:absolute.

 

[Gelöschtes Mitglied 35303]

Danke für Eure Antworten. Soweit funktioniert das ganze. Da ich jedoch mit margin: auto positioniere, verschiebt sich das Bild beim verkleinern des Festers mit. Kann das ganze irgendwie so einstellen, das sich das Bild an der Mitte des Divs, anstatt der Fenstergröße orientiert?

 

[MrMurphy]

Hallo,

Da ich jedoch mit margin: auto positioniere

Das sagt leider überhaupt nichts aus.

Um dir konkret helfen zu können benötigen wir einen Link zu der Seite oder den Quelltext (HTML + CSS) und die Bilder. Es kommt ja auch darauf an wie die Bilder sich gegenseitig beeinflussen. Und welche CSS-Eigenschaften auf das große Bild wirken.

Ich sehe wie djheke für eine Lösung den Einsatz von position:absolute.

Ob und wie das mit margin geht können wir erst nach Kenntnis deines Quellcodes und deiner Bilder sagen.

Gruss

MrMurphy

 

[Gelöschtes Mitglied 35303]

Spoiler: Definition in der CSS-Datei

#content {
        background-attachment: relative;
        background-image: url(content-background.png);
        background-position: center top -115px;
        background-repeat: no-repeat;
        background-size: 175%;
        height: 470px;
        overflow: auto;
        width: 730px;
}

Spoiler: Content der main auf der index.html

<div id="main">
      <img src="empty.png" onmouseover="src='test1.png'" onmouseout="src='test2.png'" style="position: absolute; left: 0px; right: 5px; margin: 275px auto 0px auto; width: 398px;" >
</div>

• "empty.png" ist eine leere (transparenter Hintergrund) png-Datei und hält den Platz "frei" bis zum ersten mouseover
• "test1.png" und "test2.png" haben dieselbe Bildgröße, sind im Prinzip dieselben Dateien, nur hat eine davon nur eine andere Farbe

 

[Sempervivum]

Kann das ganze irgendwie so einstellen, das sich das Bild an der Mitte des Divs, anstatt der Fenstergröße orientiert?

Wenn es das nicht tut, hast Du u. U. das position:relative bei diesem div vergessen.

 

[Gelöschtes Mitglied 35303]

Dankeschön, jetzt bleibt es an der selben Stelle.
:))))