Problem mit Positionierung des Hintergrund-Bildes

[lascaux]

Hallo,

ich habe mein Problem schon im CSS-Teil dieses Forums gepostet. Nach Recherche bin ich nun drauf gekommen, dass mein Problem nur mit Javascript zu bewältigen wäre.
Leider beherrsche ich JS nicht ausreichend genug, um ein Script für mein Problem zu finden.

Es handelt sich hierbei um http://www.html.de/css/39895-positionierung-eines-bildes.html

Da ich weiß, dass wir hier nicht bei 'Wünsch dir was' sind, habe ich nach einer Lösung gesucht und etwas gefunden:

var browserhoehe = window.innerHeight;
var halbehoehe = fensterhoehe/2;

Nur weiß ich leider nicht, wie ich das in meinen Quellcode einbauen kann, so dass ich mit der errechneten Höhe des jeweiligen Browserfensters in CSS arbeiten kann.

Im CSS-Teil würde es so aussehen:

#imgPos {width: 100%; height: +browserhoehe+px;  z-index: -1; position: absolute; top: 50%; margin-top: -+halbehoehe+px;}

Bitte nicht lachen, ich weiß, dass es so nicht funktioniert.

Kann mir da bitte jemand dabei helfen und mir einen Lösungsansatz geben? (So ganz auf den Kopf gefallen bin ich nicht).

Vielen Dank schonmal im Voraus.

lascaux

 

[lascaux]

Kann mir da niemand weiterhelfen?

 

[Gilles]

Moin. Bei Layouts würde ich eher die Finger von JS lassen, denn was ist wenn jemand mit deaktivierten JS auf die Seite kommt oder sein Browserfenster zum Abfragezeitpunkt kleiner gemacht wurde und danach vergrößert wird?
Aber hier dein script, was du am besten in den headbereich rein knallst. Nebenbei, CSS kannst du nicht einfach mit Javascript mischen :)

<script type="text/javasript">
var browserhoehe = window.innerHeight;
var halbehoehe = fensterhoehe/2;

window.onload = function() {
   var bildElement = document.getElementById("imgPos");
   bildElement.style.height = browserhoehe+"px";
   bildElement.style.marginTop = "-"+halbehoehe+"px";
};
</script>

Denke dennoch, dass du lieber eine Nicht-JS-Variante finden solltest :)