✔ Probleme beim Hintergrundbild positionieren..

[Suchfunktion]

Aloah und Moin Moin!

Ich versuche gerade wiedermal, eines der 'Kunstwerke' (also sowas umzusetzen ist wahre Kunst *fg*) in HTML+CSS zu verwirklichen.(PHP scheidet diesmal leider komplett aus *nichtmehr weiter leben will*)

Ich habe eine Grundstruktur aufgebaut (siehe Anhang Nr. 1) und schon mit Beispielinhalten, Formatierung, usw. bearbeitet.

Im Haupt-Bereich (der gruene) steht der Seiteninhalt, Rot ist der Header (mit Logo, usw.) und Blau ist das Menue.
Im gruenen Bereich soll ein Hintergrundbild zu sehen sein, welches fest oben links positioniert (also fixed) ist.

Hier mein CSS fuer den gruenen Bereich:

.content{
	height: 364px;
	width: 653px;
	float: right;
	overflow: auto;
	background: #214174 url(../images/middle_text.gif) no-repeat fixed top;
}

Und hier wird er eingebunden:

		<div class="content">
			<div class="content_text">
				<!-- SEITENINHALT:ANFANG -->
				Nullam gravida. Phasellus arcu odio, nonummy sit amet, vestibulum congue, cursus at, tellus. Donec sit amet enim. Quisque sed tellus vitae mi vulputate blandit. Mauris in elit id metus varius auctor. Donec a turpis nec metus facilisis hendrerit. Vestibulum tempor. Maecenas scelerisque. Nam nec odio. Ut sodales. Cras varius, justo ac commodo semper, tellus velit aliquet nibh, a tincidunt dolor lorem a lectus. 
				<!-- SEITENINHALT:ENDE -->
			</div>
		</div>

Das Problem:
So sollte es aussehen (Hier mit Ansicht der DIV-Bereiche)

So sieht es aus (Hier mit Ansicht der DIV-Bereiche)

Der Fehler tritt allerdings NICHT im Internet Explorer auf (warum auch immer), sondern in anderen Browsern, wie z.B. Mozilla FireFox, Opera, usw.

Was mache ich da falsch?

Es soll halt auf jeden Fall das Hintergrundbild korrekt angezeigt werden und fixiert sein,
also auch beim Scrollen soll es seine Position beibehalten.
(Scrollen tut man per Overflow in dem gruenen DIV-Bereich.)

Danke fuer eure Hilfe

 

[Maik]

Für background-position werden zwei Angaben gemacht: der erste Wert steht für die horizontale, der Zweite für die vertikale Position.

background: #214174 url(../images/middle_text.gif) no-repeat fixed left top;

 

[Suchfunktion]

Danke erstmal fuer die Antwort, aber nu siehts noch schlimmer aus

Das Hintergrundbild ist einfach noch weiter nach links gerutscht, also jetzt ist nurnoch das rechte drittel vom Hintergrundbild zu sehen

 

[Maik]

Dann positioniere die Hintergrundgrafik mit den entsprechenden Pixel-Angaben, wie z.B.

background-position: 200px 0; /* links = 200px, oben = 0px */

 

[Suchfunktion]

Naja, jetz verschiebt sich das Bild, und es sieht super aus!
Aber im Internet Explorer nicht.

Da wird das Bild nach rechts unten verschoben,
somit ist es nich 'auf seinem Platz'..

 

[Teh H4mst0R]

also ich würde einfach für das hintergrundbild ein absolut positioniertes div verwenden

.content{
    height: 364px;
    width: 653px;
}
.content_background{
    background: #214174 url(../images/middle_text.gif) no-repeat;
    position: absolute; /* absolut positionieren (keine Prozentangaben) */
    left: 200px;  /* Abstand von links */
    top: 100px;   /* Abstand von oben */
    width: 653px; /* Breite */
    height: 364px; /* Höhe */
    overflow: auto;
    z-index: 2; /* Stapelreihenfolge (nach hinten oder vorne...) */ 
}

<div class="content">
<div class="content_text">
<!-- SEITENINHALT:ANFANG -->
Nullam gravida. Phasellus arcu odio, nonummy sit amet, vestibulum congue, cursus at, tellus. Donec sit amet enim. Quisque sed tellus vitae mi vulputate blandit. Mauris in elit id metus varius auctor. Donec a turpis nec metus facilisis hendrerit. Vestibulum tempor. Maecenas scelerisque. Nam nec odio. Ut sodales. Cras varius, justo ac commodo semper, tellus velit aliquet nibh, a tincidunt dolor lorem a lectus. 
<!-- SEITENINHALT:ENDE -->
</div>
</div>
<div class="content_background">&nbsp;</div>

so hab ich selten Probleme, und wenn sich dann doch mal was verschiebt, dann bleibts meistens auf der gleichen Ebene (z-index)

hoffe, das kann dir etwas weiterhelfen

 

[Maik]

@ Suchfunktion: gibt es eine Online-Version der Problemseite?

 

[Maik]

Naja, jetz verschiebt sich das Bild, und es sieht super aus!
Aber im Internet Explorer nicht.

Da wird das Bild nach rechts unten verschoben,
somit ist es nich 'auf seinem Platz'..

In diesem Fall empfiehlt es sich, für den IE eine CSS-Browserweiche zu verwenden.

Stichwörter: Star-HTML-Hack oder Conditional Comments.