div background-image im IE

[123arne]

Hallo
ich habe ein Problem mit dem Hintergrundbild im div beim IE.

div.centerpage {
    width:800px;
    height:90%;
    border: 1px solid black; 
    position: absolute;
    left:50%;
    top:5%;
    margin-left:-400px;
    background-image: url(../images/body_back.jpg);
    background-repeat: no-repeat;
    background-image-height:100%; 
    background-color:#009966;
    background-position: center top;
}

während Firefox alles wie gewünscht darstellt, ignoriert IE das Hintergrundbild und die Hintergrundfarbe.
Woran kann das liegen?

Gruß
Arne

 

[Gumbo]

Probier mal Folgendes:

div.centerpage {
	width:       800px;
	height:      90%;
	border:      1px solid black; 
	position:    absolute;
	left:        50%;
	top:         5%;
	margin-left: -400px;
	background:  #096 url(../images/body_back.jpg) no-repeat 50% 0;
}

Eine background-image-height-Eigenschaft gibt es übrigens nicht.

 

[exed]

Hi
wäre sehr von Vorteil wenn du uns vielleicht einen Link zu der Seite gibst dann kann man sich das selbst im IE und Firefox ansehen.

Gruß
Max

 

[Maik]

Anmerkung: eine CSS-Eigenschaft namens background-image-height gibt es nicht.

 

[123arne]

Habs mal online gestellt
http://www.ayurveda-nord.de/index.php

 

[Maik]

Der Grund für das Darstellungsproblem im IE sind die fest positionierten DIVs innerhalb des DIV .centerpage, weshalb der IE das Elternelement vertikal nicht ausdehnt und die Hintergrundgrafik / -farbe, sowie den schwarzen Rahmen nicht vollständig darstellt.

Lösungsvorschlag: die absoluten Positionsangaben der eingebetteten DIVs entfernen, und die Elemente stattdessen mit entsprechenden margin-Angaben (= Außenabstand) im Elternelement ausrichten:

div.centerpage {
        width:800px;
        height:90%;
        border: 1px solid black;
        position: absolute;
        left:50%;
        top:5%;
        margin-left:-400px;
        background-image: url(../images/body_back.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #009966;
        background-attachment: inherit !important;
        background-attachment: fixed;
}

.menue {
        border: none;
        margin-top: 26px;
        margin-left: 1px;
        width: 798px;
        /*background-image: url(../images/backgrnd_ges.jpg); */
}

* html .menue { /* Für IE */
margin-top: 0;
}

.kopf {
        height: 150px;
        width: 798px;
        margin-top: 1px;
        margin-left: 1px;
        text-align: center;
        overflow: visible;
}

.content {
        overflow: auto;
        background-repeat: no-repeat;
        padding: 20px;
}