CSS Anzeigen eines Hintergrundbildes mit Image Map

[Furtano]

Hi,

meine CSS Skills sind eingerostet.

Ich möchte die Raute mit dem Schweißer-Bild in den Grünen Hintergrundbereich haben.
Wenn ich .backgrouund als display: inline; mache wird das Hintergrundbild nicht mehr angezeigt.
Und wenn ich display: block; mache, wird die Raute nach unten geschoben.
Die Besonderheit ist, dass ich ein image benutzen muss weil ich eine Imagemap benötige (Weiterleitung, wenn man auf die Raute klickt).

Hier die Seite:
http://christian-schade.eu/test/1/

Zur Info: Das ganze soll eine "statische" Seiten-Layout werden (wird so gewünscht).

Danke und LG,
Christian

 

[Nase]

position: absolute und nicht relative. Sieht mir aber alles ein wenig komisch aus.

 

[Furtano]

Ach du bist super, danke!
Was kann ich denn noch besser machen?

 

[thrice]

http://jsfiddle.net/x57cc1cu/

Musste nur noch positionieren.

 

[Furtano]

Das Problem jetzt ist, dass sich die Position Raute (X-Achse) nicht "dynamisch" berechnet.
z.B. Wenn ich den Bildschirm breiter mache, so passt sie nicht zum Bild.
Also kann man doch nicht bei .homeImage mit position: absolute; arbeiten?

 

[brubbelmichi]

Bei mir wird da ohne Javascript garkein Bild angezeigt. Ist das so gewollt?

 

[Furtano]

@thrice danke so ists besser
@brubbelmichi ja ist normal

 

[DecentMan]

Falls du noch 'was zum Schmökern brauchst:
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Das Zauberwort lautet hier "Responsive Design"...