Alpenland: Grafik auf Hintergrundbild positionieren

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

  1. Om nah hoo pez nyeetz, Alpenland!

    #blume { position:absolute; top:440px; left:450px; width:200px; height:200px; z-index:1; background-color:#none; }

    Position verstehen

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. 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; }

      Position verstehen

      Matthias

      1. 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

        --
        1/z ist kein Blatt Papier.