# div background-image im IE



## 123arne (28. März 2006)

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 (28. März 2006)

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 (28. März 2006)

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 (28. März 2006)

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


----------



## 123arne (28. März 2006)

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


----------



## Maik (28. März 2006)

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;
}
```


----------

