Bilder auf Bild fest ausrichten

html.de-Forum HTML, XHTML & CSS
1

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

2

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

angeordnet sind

3

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

4

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?

5

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

6

#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; }

[HTML]


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

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.

8

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