Probleme mit Hintergrundbildern und z-index

[patrick_l]

Hallo allerseits,

ich sitze jetzt seid längerem an meiner Seite. Habe immer wieder etwas ab oder umgeändert. Nun folgendes: Ich verwende für meine Seite ein Hintergrundbild das ich mittels "repeat-y" über die ganze Content-Fläche laufen lassen. Das Image ist der Schatten meiner Seite. Nun habe ich aber zwei weitere Bereiche in denen jeweils eine andere Farbe eingesetzt wird.

Nun muss ich mit dem z-index das ganze bewerkstelligen. Und dort ist mein Problem. Wie setze ich das ganz nun um? Ich habe wie blöde mehre Stunden gesucht Bücher gewälzt, aber blicke nicht durch. Mit Blockelementen verstehe ich ja, habe jetzt aber irgendwie ne' kleine Denkblockade. Ich habe hier zur besseren Verdeutlichung Grafik für eich beigefügt.



Schonmal besten Dank, Otto

 

[Silvio]

AW: Probleme mit Hintergrundbildern und z-index

Huhu Otto, scheinbar sind wir die Frühaufsteher . Kannst Du bitte den Quelltext posten? Versteh nicht ganz, wo Deine Sorgen sind. Meinst Du, dass Du den Schatten mit z-index verlaufen lassen willst?

 

[patrick_l]

AW: Probleme mit Hintergrundbildern und z-index

Huhu Otto, scheinbar sind wir die Frühaufsteher

Hehe, das kann gut sein. Ich sitze nun schon seid kurz nach 1 wieder vor der Glotze.
Aber back to topic.

Quelltext kann ich gerade nicht posten. Ich versuche es aber nochmal etwas zu erklären was meinen Seitenaufbau angeht. Ich habe eine Hauptdiv in dem halt der ganze Content, Headbereich und Footer drinnen steckt. In meinem Stylesheet habe ich halt mit Background-image meinen Schatten definiert. Nun habe ich aber ich aber oben und unten die unterschiedlichen Farben. Demnach muss der von schwarz-nach transparent Verlauf vom Schatten (PNG-Format) über den anderen Hintergrundbereichen liegen. Nur wie schreibe ich dies in meinem CSS. Ich hoffe es ist verständlich.

 

[groove]

AW: Probleme mit Hintergrundbildern und z-index

Hi Otto.
Wenn die anderen beiden Bereich nur Farbe sind brauchst du doch gar keinen z-Wert. Farbe mit background-color und background-image kannst du ja gemeinsam einsetzen und das image überlagert color auf jeden Fall - oder verstehe ich jetzt irgendwas falsch?

 

[patrick_l]

AW: Probleme mit Hintergrundbildern und z-index

Das geht ja eben nicht, oder habe ich jetzt einen Denkfehler. Ich habe ja zwei Grautöne. Einmal oben und ein dunklerer unten. Ich kann für kann ja im "body" nur einmal Background-Color angeben. Darüber läuft ja auch das Backgroundimage. Also über die beiden Farben. Irgendwie hakt es da gerade bei mir und ich komme nicht weiter. Leider komme ich gerade nicht an meinen Code ran.

Hier sieht man jetzt alle Teile der Seite die im Hintergrund bzw. als Background definiert sind bzw. die Teile die es sein sollen. Wie geschrieben, 3 Schichten - unten die grauen Bereiche und darüber die weiße Fläche mit Schatten. Deshalb kam ich halt auf den z-index.

 

[groove]

AW: Probleme mit Hintergrundbildern und z-index

;-) Denkfehler trifft's glaub ich gerade ;-)
Der z-Index hilft dir bei den backings ja nichts - damit positionierst du nur die div's. Der Ansatz muss also in der Aufteilung deiner Boxen liegen --> z.B. eben dem Body die Grautöne mitgeben und ein div "content"(oder so ähnlich) an das du deinen Schatten hängst. Mehr als ein bg-image pro div geht einfach nicht --> du musst mit dem Aufbau der div's tricksen.

 

[schnullerbacke]

AW: Probleme mit Hintergrundbildern und z-index

groove hat da schon recht, so würde ich das auch machen.
Für den body eine Hintergrundfarbe + Grafik.
Für den Contentbereich dann den Schatten als Background-Grafik.


Z.B. für den body:
Das dunkle grau als background-color, das hellere grau als background-image mit repeat-x. Damit hast du die beiden grauen Streifen.
Für den hellgrauen Streifen erstellst du dir eine 1px breite Grafik in der Höhe, wie du den Streifen benötigst.

Dein content Div bekommt dann den Schatten als Background-image mit repeat-y.

 

[patrick_l]

AW: Probleme mit Hintergrundbildern und z-index

Mmh, so langsam macht es glaube ich Klick bei mir Ich habe nun folgendes gedacht. Als Background im body einen Grauton definieren. Den anderen über Bg-Image einfügen. Und meinem Wrapper (Hauptcontainer) das Bg-Image mit dem Schatten verpassen. Die innen liegenden Elemente dann ganz normal über die margin und padding-werte ausrichten / positionieren.

Besten dank schon einmal für die Hilfe. Werde später schauen das ich das ganze umgesetzt bekomme. Jetzt erst noch mit anderem beschäftigt.

Edit:
Mein Bg-Image also der Schatten ist halt extra 965 x 1px groß. Ich halte meine benötigen Grafiken wenn es geht immer so klein wie möglich. Ok, das ein oder andere fällt bei CCS3 ja nun auch weg. Aber jetzt etwas falsch hier.

Danke nochmal und Gruß, Otto

 

[groove]

AW: Probleme mit Hintergrundbildern und z-index

@CSS3: pass bei der Verwendung von css3-Befehlen aber auf den Spezialfreund Internet Explorer auf ;-) Der wird da nämlich großteils nicht mitspielen.

 

[patrick_l]

AW: Probleme mit Hintergrundbildern und z-index

@CSS3: pass bei der Verwendung von css3-Befehlen aber auf den Spezialfreund Internet Explorer auf ;-) Der wird da nämlich großteils nicht mitspielen.

Ja, der IE hat mal wieder seine Extrawürste Meine Webseite wird bzw. ist nicht in/mit CS3 umgesetzt. Trotzdem die Augen auf was so die Erneuerungen angeht (html5, css3). Auch ist die Seite selbst auf Joomla (1.5) aufgebaut.

 

[groove]

AW: Probleme mit Hintergrundbildern und z-index

Ja, der IE hat mal wieder seine Extrawürste

Würde eher sagen der ganze IE ist eine einzige Extrawurst :lol:

 

[sokie]

AW: Probleme mit Hintergrundbildern und z-index

css:

html{
   background: #cccccc url(grau.png) repeat-x; /*als hintergrundfarbe den zweiten grauton*/
}
body{
  background: transparent url(schatten.png) repeat-y;
}

so sollte es in allen Browsern funktionieren.

In allen fällen wäre es aber besser, den schatten in das "wrapper" Element zu legen, weil die Inhalte je nachdem ob es eine scrollbar gibt oder nicht, nicht zentriert in dem bereich stehen.

 

[patrick_l]

AW: Probleme mit Hintergrundbildern und z-index

In allen fällen wäre es aber besser, den schatten in das "wrapper" Element zu legen, weil die Inhalte je nachdem ob es eine scrollbar gibt oder nicht, nicht zentriert in dem bereich stehen.

Ich bin jetzt auch den besseren Weg gegangen. Habe das Bg-Image im Wrapper angegeben. Im Body dann wie schon erwähnt den kleinen oberen Farbbereich mit einem Image erstellt und den Rest mit Backgroundcolor. Ich danke eich nochmal für die Hilfe.

Grüße Otto