Zwei Hintergründe im Contentbereich übereinander legen?

[NaraYan]

Hallo liebe Contao-Gemeinde,

hab da ein Problem. Ich habe meinem Contenbereich ein Hintergrundbild verpasst.
Funktioniert auch ohne Probleme:

#container
{
	margin:0;
	padding:0 100px 50px 0;
	background:url("tl_files/lichtblicke/bg_main.png") left top repeat-y;
	z-index:999;
}

Hier habe ich ganz klassisch links die Navigation und rechts den Hauptbereich mit den entsprechenden Artikeln.
Ich würde nun gerne ein zweites Hintergrundbild unter die Artikel legen (unten rechts positioniert). Kann ich evtl schon an dieser Stelle ein zweites Bild einfügen und die Reihenfolge mittels z-index festlegen?

Testweise habe ich ein HTML-Modul erstellt und mit einer neuen Klasse verknüpft:

.background_image
{
	margin:-433px 6px 0 auto;
	text-align:right;
	z-index:-999;
}

<div class="background_image">
<img src="tl_files/lichtblicke/bg_logo.gif" id="background_image"/> </div>

Das Bild kann ich hier beliebig verschieben, leider aber nicht die Reihenfolge nach hinten oder vorne.

Blöderweise, finde ich das vermeindliche Modul "Artikel" auch nicht in der Modulübersicht.


Hoffe mein Problem ist einigermaßen verständlich.

Ich danke Euch schon jetzt ganz herzlich

LG

[NaraYan]

Hier ein Screenshot.

[tl_richard_user]

So wie es aussieht, verwendest du ein eigenes Layout. Warum?
Ansonsten brauchst du doch nur #main den Hintergrund geben.
Oder interpretiere ich das Problem falsch?

[tl_richard_user]

Blöderweise, finde ich das vermeindliche Modul "Artikel" auch nicht in der Modulübersicht.

"Artikel" ist kein Modul, wenn man so will. Es sind nur die Artikel unter dem Menüpunkt Artikel im Backend.

P.S. Schöner Screenshot. Ratefrage: Wo ist die Fotomontage zu erkennen?

[NaraYan]

Das dachte ich mir schon. Ähnlich dann wie News, Events, ect.
Aber wie kann ich denn zwischen dem in #content hinterlegten Haupthintergrund bg_main.png und dem Artikel ein weiteres Hintergundbild "schieben"?

Ja, ist ein eigenes Layout. Wollte für dieses Testprojekt mal alles von grundauf selbst aufbauen und nicht nur abändern. Da ist der Lerneffekt größer

P.S. In wie fern Fotomontage? Steh grad auf dem Schlauch

[tl_richard_user]

Ich kenne jetzt den Quelltext nicht.
Ich würde, falls nicht vorhanden, einen weiteren div-Container unter #container "einbauen" bspw. #main.
Den kannst du ja dann stylen. Mit CSS.
__________________________________________

oder: Du benutzt das vorhandene div.background_image und stylst das mit width, height (Größe des Bildes) und background-image.
Obwohl, hier könnte es auch wieder Überlappungsprobleme geben.

P.S. Ich sehe da drei Scrollbalken.

[wotank]

und die Reihenfolge mittels z-index festlegen?

die Reihenfolge kann man nicht so einfach per z-index festlegen.
z-index wirkt nur bei Elementen die ungleich position:static sind.

negative z-indexe sind mir nicht bekannt.
Informiere dich doch mal über die Stapelreihenfolge.

[NaraYan]

Oh supi! Das Tutorial werde ich mir heute Mittag einmal zu Gemüte führen
Und ebenfalls den Vorschlag von Richard.
Vielen Dank schon einmal an Euch beide!

[NaraYan]

So, ich hab das Ganze jetzt erst mal gelöst bekommen.
Folgende Klasse habe ich erstellt und den einzelnen Artikeln mitgegeben:

.artikel
{
	margin:0;
	padding:0 100px 150px 0;
	background:url("tl_files/lichtblicke/bg_logo.gif") right bottom no-repeat;
}

Funktioniert wie es soll, stelle ich mir aber unpraktisch vor, wenn man größere Projekte hat, mit >20 Artikeln/Seiten. Die will man dann natürlich nicht alle anfassen müssen.

Vielleicht hat ja noch jemand eine globalere Lösung um ein Bild zwischen einem in #container/main definierten Hintergrundbild und den Artikeltexten zu legen

[tl_richard_user]

Dann lege noch einen div-Container zwischen Artikel und Hauptspalte.
Dann das ganze für .main oder so machen.

[NaraYan]

Oh, Mann! Vielen Dank für den finalen Schlag auf den Hinterkopf
Jetzt klappt es perfekt!!!
Wenn man es weiß ist es ja extrem easy

Hier ne kurze Zusammenfassung für andere, die an so einem Fall nagen:


Festlegen des allgemeinen Container-Hintergrundes. Durchgängig über alle Spalten:

#container
{
	margin:0;
	padding:0 6px 0 0;
	background:url("tl_files/lichtblicke/bg_main.png") left top repeat-y;
}

Neue Klasse für das darüberliegende Hintergrundbild in der Hauptspalte.
Mit entsprechendem Abstand nach rechts und unten, damit der Artikeltext nicht direkt am Rand liegt:

.background_image
{
	margin:0;
	padding:0 100px 150px 0;
	background:url("tl_files/lichtblicke/bg_logo.gif") right bottom no-repeat;
}

Zwei neue HTML-Module anlegen, in der die obige Klasse angesprochen wird:

Background_Logo

<div class="background_image">

Background_Logo2

</div>

Diese im Layout um das Artikelmodul legen. Die Modulreihenfolge sieht wie folgt aus:
1) Modul: Seitenbild --- Kopfzeile
2) Modul: Navigation --- Linke Spalte
3) Modul: Background_Logo --- Hauptspalte
4) Modul: Artikel --- Hauptspalte
5) Modul: Background_Logo2 --- Hauptspalte
6) Footer-Text --- Fußzeile