✔ "2 Hintergründe"

[Superdok]

So ich hab eine Homepage (auch mithilfe dieses Forums) erstellt, die auch super funktioniert und sich in der Höhe je nach Bildschirmgröße zusammenziehn kann.
Als Hintergrund der Homepage nehme ich einen Verlauf oder irgendein Muster, das sich wiederholt.
Nun hab ich mich gefragt, ob es möglich ist, ein sich in x-richtung wiederholendes Bild am unteren Ende (soll nicht mit dem Footer, der sich wenn man das Browserfenster verkleinert, mit nach oben fahren) des Browsers anzubringen. Ich hätte nämlich dort gerne ein Bild von jubelden Personen, da dies sehr gut zum Thema der Homepage passt. Den Musterhintergrund habe ich per CSS in das body Element zugewiesen. Ist es möglich einen 2. Hintergrund zu machen (überhalb des Musters, aber unterhalb des continer/wrap divs), der das Bild enthält.

Ich hab es so versucht.
#Background {
left:0;
bottom:0;
position:absolute;
width:100%;
height:50px;
z-index:0;
background-image: url(BILD.png);
}

Und dann im Body Bereich den Div mit der entsprechenden ID. Leider verschiebt sich dort das Bild mit dem Footer nach oben, wenn man das Browserfenster verkleinert. Dies will ich aber vermeiden. Wie mach ich so etwas sonst? Ist vielleicht mein Anstaz richtig, aber noch nicht komplett oder geht das gar nicht

 

[Maik]

Hi,

hast du mal einen Link zur Seite, damit man sich das näher anschauen kann?

 

[Superdok]

Ja k wenn das weiterhilft: Ich hab es mal kurz so gemacht soweit ich es weiß:
http://projektpfinz.pr.ohost.de/Test/Untitled-1.html

Jetzt soll aber unten noch (da wo das helle blau ist), und zwar am unteren Bildschirmende noch das andere Bild hin, das man aber nur sieht, wenn man Vollbild hat (und wenn man das Fenster verkleinert nicht wie der schwarze (notgedrungen) Footer mit hochschiebt, sondern dann im unteren "nichts verschwindet". Der VerlaufHintergrund zieht sich ja auch nicht mit hoch.

 

[Maik]

Wenn der zweite Hintergrund unterhalb des Footers sichtbar sein soll, muss dieser weiter oben positioniert werden, denn egal, wie groß das Browserfenster ist, der Footer wird mit bottom:0 immer am unteren Fensterrand positioniert.

 

[Superdok]

Das mit Bottom:0 hab ich auch verstanden, deshalb bleibt der Footer ja immer an unterster stelle, auch wenn man das Browserfenster verkleinert.
Das Bild mit den Leuten, das sich in x-Rcihtung wiederholen kann soll über die komplette Browserbreite gehn (width: 100%). Dieser soll hinter dem Footer erscheinen (macht man ja mit z-index oder?), soll aber rechts und links des Footers bzw. des Maincontents wieder erscheinen: Also es geht am unteren Ende des Browsers von links nach rechts komplett, wird aber durch den Footer Div verdeckt (in der Mitte).

ABER: Im Gegensatz zum Footer soll das Bild nicht wenn man das Browserfenster verkleinert (von unten nach oben) mit nach oben "Sliden", sondern es soll einfach unten stehn bleiben, ist aber durch das Verkleinern des Browser nicht sichtbar.

vgl.: Der Verlauf im Hintergrund endet mit einem, hellen Blauton. Wenn man das Browserfenster von unten nach oben verkleinert, sieht man im Browser irgendwann nur noch den dunklen Farbton, da der Helle "verdeckt" wird.

Ist das möglich, wenn ja wie muss ich vorgehn bzw. wie lautet der CSS Teil von z.B "#background" (für das Div)

 

[Maik]

ABER: Im Gegensatz zum Footer soll das Bild nicht wenn man das Browserfenster verkleinert (von unten nach oben) mit nach oben "Sliden", sondern es soll einfach unten stehn bleiben, ist aber durch das Verkleinern des Browser nicht sichtbar.

Das ist technisch nicht möglich, wenn das Element mit bottom am unteren Element- bzw. Fensterrand positioniert ist, siehe das Verhalten des Footers.

 

[Superdok]

K danke dann hat sich das erledigt.

Aber als ich den Hintergrund geändert habe und grad vorhin mit dem IE6 die Seite geöffnet habe, ist mir aufgefallen, dass unterhalb des Footers der komplette Maincontent wiederholt wird und man sogar runterscrollen kann?
Was ist dort falsch?

 

[Maik]

Das Dokument wird nicht mehr im Quirksmode übergeben.

 

[Superdok]

D.h. wie kann ich das ändern?

Liegt es vielleicht auch an der min-height des #wraps Als ich diese verkleinert habe wurde das runterscrollbare auch kleiner. Wenn ja wie mach ich das der IE das min-height versteht?
Bzw. es würde auch reichen für den IE6 eine eigene CSS Datei zu machen ohne min height. Wie mach ich das der Internetexplorer 6 eine eigene CSS Datei lädt, FF aber die normale?

 

[Maik]

<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Vergleiche hierzu einfach nochmal den Quellcode aus meinen Beispielen in deinem ersten Thread.

Der IE6 unterstützt min-height überhaupt nicht, interpretiert aber fälschlicherweise height als "Mindesthöhe":

min-height:500px;
height:auto !important;
height:500px;

Alternative CSS-Dateien für den Internet Explorer (Conditional Comments)