Grafik auf Hintergrundbild positionieren
Alpenland
- design/layout
Hallo,
ich habe auf meiner Internetseite ein Hintergrundbild horizontal zentriert eingerichtet. Nun möchte ich per CSS eine Grafik auf dem Hintergrundbild positionieren. Wie stelle ich es an, dass bei jeder Bildschirmauflösung die Grafik auf der selben Stelle des Hintergrundbildes erscheint. Die Grafik ist aber nicht zentriert sondern einige Pixel ausser Mitte angeordnet.
Die Grafik binde ich wie folgt ein.
<img src="blume.gif" width="200" height="200" id="blume"
Die dazu gehörige CSS Zeilen sind wie folgt.
#blume { position:absolute; top:440px; left:450px; width:200px; height:200px; z-index:1; background-color:#none; }
Mit diesen Programm-Zeilen komme ich aber nicht weit.
Könnte mir bitte jemand bei dem Problem behilflich sein.
Vielen Dank im Voraus.
Gruß
Alex
Om nah hoo pez nyeetz, Alpenland!
#blume { position:absolute; top:440px; left:450px; width:200px; height:200px; z-index:1; background-color:#none; }
Matthias
Hallo,
vielen Dank für die Antwort.
Die Frage bleibt aber offen, wie ich auf einem Hintergrundbild das horizontal zentrisch auf jedem Monitor egal welche Auflösung angezeigt wird, eine Grafik anzeigen kann. Die Grafik soll bezogen auf das Hintergrundbild immer an der gleichen Stelle erscheinen.
In Pixel ausgedrückt, ausgehend von der Bildschirmmitte die Grafik z.b. 200px rechts.
Wie bringe ich das dem Programm bei?
Vielen Dank für die Hilfe
Gruß
Alex
Om nah hoo pez nyeetz, Alpenland!
#blume { position:absolute; top:440px; left:450px; width:200px; height:200px; z-index:1; background-color:#none; }
Matthias
Om nah hoo pez nyeetz, Alpenland!
Die Frage bleibt aber offen, wie ich auf einem Hintergrundbild das horizontal zentrisch auf jedem Monitor egal welche Auflösung angezeigt wird, eine Grafik anzeigen kann. Die Grafik soll bezogen auf das Hintergrundbild immer an der gleichen Stelle erscheinen.
In Pixel ausgedrückt, ausgehend von der Bildschirmmitte die Grafik z.b. 200px rechts.Wie bringe ich das dem Programm bei?
Für die Hintergrundgrafik verwendest du passende Angaben für background-position und background-attachment.
die Blume wird absolut positioniert und erhält etwa die Angabe
left: -moz-calc(50% + 200px);
calc(50% + 200px);
Matthias