Hintergrundbild einfacher in Artikel einbinden?

**Bierbauch** · 06.03.2010, 15:55

Hallo,

ich frage mich gerade, ob es nicht einen einfacheren Weg gibt, um einzelne Artikel mit Hintergrundbildern zu versehen...momentan gehe ich wie folgt vor:

1. In den Stylesheets eine Klasse mit dem gewünschten Hintergrundbild definieren
2. In den Artikel-Eigenschaften gebe ich dann die zuvor erstellte Klasse an
3. Im TinyMCE erstelle ich ein Text-Element und gehe dort in die CSS-Styles. Beim Reiter "Positionierung" gebe ich die Maße des Bildes an, damit es hinterher vollständig zu sehen ist. Danach schreibe ich einen Text und positioniere ihn ggf. noch mit Top, Left usw. auf dem Hintergrund. Dann noch position: relative in den CSS-Styles einstellen und das Element abspeichern.
4. Eventuell noch weitere Text-Elemente erstellen und mittels Position absolute auf dem Hintergrund positionieren.

Irgendwie gefällt mir diese Vorgehensweise nicht so gut, da sie bei vielen Artikeln bzw. Hintergrundbildern lästig werden dürfte und zudem für spätere Änderungen durch Redakteure vermutlich zu kompliziert ist.

Gibt es da eventuell eine einfachere Variante?

Gruß,
Bierbauch

**medamind** · 06.03.2010, 16:05

Hallo,
Also mir erscheint das auch reichlich umständlich.
Soweit so gut, kannst du ja eine Klasse .hg_bild definieren.
.hg_bild{
background-image: url(/tl_files/meinHintergrund.jpg);
background-repeat --wie auch immer
}
Jeder Artikel, dem du dann die Klasse .hg_bild zuweist, sollte dann doch automatisch das Hintergrundbild bekommen (natürlich ein und dasselbe für alle Artikel mit Klasse .hg_Bild).
Du kannst aber ja auch variieren und eine Reihe von Hintergrund-Bild Klassen erstellen und die nach Lust und Laune zuweisen.

Was ich leider überhaupt nicht verstehe, ist deine Vorgehensweise über den Tiny!?
Oder habe ich dich da total missverstanden?

Viele Grüße
Anne-Kathrin

**Bierbauch** · 06.03.2010, 16:33

Hallo Anne-Kathrin,

die ersten beiden Schritte habe ich bislang genauso wie von Dir beschrieben praktiziert. Wenn ich danach dann Text-Elemente zum Artikel hinzufüge, wird das Bild leider immer nur so weit angezeigt, wie der Text im Artikel reicht. Man kann die Abmessungen des Artikels auch ganz gut mit Firebug nachvollziehen. Daraus resultierte meine Vorgehensweise mit den CSS-Eigenschaften im TinyMCE, wo ich einfach das erste Text-Element des Artikels so groß gemacht habe wie das Hintergrund-Bild. Innerhalb dieses Areals lässt sich der Text dann ebenfalls über die CSS-Eigenschaften positionieren.

Bei den nachfolgenden Text-Elementen ist ein "Vergrößern" dann nicht mehr notwendig, die Texte werden einfach über den bereits vorhandenen Platz "drüber" gelegt.

Zuerst hatte ich in der Seitenstruktur nach einer Möglichkeit für das Einbinden von Hintergrundbildern gesucht, aber die Klassen dort beziehen sich auf die Navigation und body, von daher sehe ich als Typolight-Anfänger einfach keine andere Möglichkeit, um Artikel flexibel mit Hintergrundbildern zu versehen und dann transparent beliebige Texte darauf zu schreiben. So eine Funktion vermisse ich aber nicht nur bei Artikeln...auch beim Layout(positionieren von Logos usw.) wäre es äußerst hilfreich, wenn man Bilder frei positionieren oder als Hintergrund definieren könnte, ohne immer wieder neue Klassen oder IDs zu erstellen. Aber eventuell habe ich ja auch etwas übersehen, das Programm ist wirklich ziemlich komplex...

Gruß,
Bierbauch

**medamind** · 06.03.2010, 16:39

Hallo

Hm, was verstehst du denn unter Artikel?
Hast du es testhalber mal mit mehreren Inhaltselementen probiert?
Dann nämlich müsste sich das Hintergrundbild vom ersten bis zum letzten Inhaltselement durchziehen.
Artikel ist ja so eine Art "Container" für Inhaltselemente und umschließt diese auch komplett. Egal ob das nun Texte oder Bilder oder Module sind.

Meine Frage, was du unter einem Artikel verstehst, zielt darauf ab, dass ich vermute, ob du vielleicht eher ein Hintergrundbild für eine komplette Seite möchtest? Dann funktioniert das ganz anders.

Anne-Kathrin

**Bierbauch** · 06.03.2010, 17:20

Hallo,

ich verstehe unter einem Artikel einen Inhalts-Container, der es mir erlaubt, Inhalte flexibel in meine Seiten einzubinden. Gehen wir mal von einer klassischen Webseite aus, also Header, Navi(left) und ein main-Bereich mit Inhalt. Nehmen wir jetzt mal an, ich habe 10 verschiedene per Menü anwählbare Seiten, wobei mir ein Artikel im main-Bereich pro Seite reicht. Jede Seite soll beim aufrufen im Main-Bereich ein Bild anzeigen. Also nicht über die gesamte Seite, sondern immer nur in dem Bereich, den man bei Typolight "main" nennt. Über das Bild möchte ich dann flexibel Text legen können, welcher sich später auch mal ändern könnte. Also jetzt keinen Roman oder vierzig Artikel hintereinander, sondern einfach nur 1 oder 2 Wörter oder Sätze, die dafür aber an speziellen Stellen transparent über dem Bild positioniert werden sollen. Das klappt auch alles soweit, es ist nur etwas umständlich. Ich habe auch schon über normale Bild-Elemente und Z-Index nachgedacht, aber wenn ich mich recht erinnere, hat man bei Bild-Elementen auch keine Möglichkeit, den Z-Index direkt zu beeinflussen...in sofern bräuchte ich da vermutlich auch immer eine extra CSS-Definition.

Gruß,
Bierbauch

**medamind** · 06.03.2010, 17:38

Okay, ich denke, wir kommen der Sache näher, glaube ich zumindest ;-)

Dann müsstest du den Seiten selbst die Klasse(n) mitgeben.
Ich kann mir vorstellen, es ist noch ein bisschen mühsam, das mit Hilfe von margins und so weiter richtig "schön" zu stylen, aber es funktioniert.
Der body hat dann auf der entsprechenden Seite die Klasse, Artikel auch.
#main und #main.inside haben sie default-mäßig nicht, aber du kannst es über
body.meinStyle div#main div.inside
oder sowas abfangen (ich hab irgendwie die Idee, dass ich lieber .inside als main das Hintergrundbild geben würde).
Probier also mal
Seite die Klasse meinStyle zuweisen und dann eine CSS-Anweisung der Art

body.meinStyle div#main {
background-image....
}
oder
body.meinStyle div#main div.inside {
background-image....
}

Anne-Kathrin

**Bierbauch** · 06.03.2010, 19:34

Hallo,

vielen Dank für Deine Mühe...mit

body.hintergrund01 #main .inside

funktioniert es wohl nicht, weil inside laut meinen Plugins bereits auf die Größe des Artikels begrenzt ist. Aber mit

body.hintergrund01 #main

lässt sich wunderbar jeder Seite eine gleichnamige Klasse und somit ein individuelles Hintergrundbild zuweisen, ganz ohne TinyMCE-Gefummel! Das ist doch schon eine bedeutende Vereinfachung. Perfekt!

Vielen Dank,
Bierbauch

**Norbert001** · 30.04.2014, 05:48

Zitat von Bierbauch

Hallo,

vielen Dank für Deine Mühe...mit

body.hintergrund01 #main .inside

funktioniert es wohl nicht, weil inside laut meinen Plugins bereits auf die Größe des Artikels begrenzt ist. Aber mit

body.hintergrund01 #main

lässt sich wunderbar jeder Seite eine gleichnamige Klasse und somit ein individuelles Hintergrundbild zuweisen, ganz ohne TinyMCE-Gefummel! Das ist doch schon eine bedeutende Vereinfachung. Perfekt!

Vielen Dank,
Bierbauch

Hallo Bierbauch,

hat das bei Dir mit body.hintergrund01 #main so funktioniert?

Ich habe in einer css dies eingetragen.

Code:

body.hintergrund01 #main {
    background-image:url("files/hintergrundbilder/1830-brot.jpg");
    background-position:center bottom;
    background-repeat:no-repeat;
}

Dann bin ich in den Artikel und habe bei CSS-ID/Klasse im rechten Feld diesen Eintrag gemacht, "hintergrund01"
aber es geht nicht. Wo habe ich den Fehler?

**tschero** · 30.04.2014, 07:07

Hi,

probier mal folgendes:

Code:

body #main .hintergrund01 {
    background-image:url("files/hintergrundbilder/1830-brot.jpg");
    background-position:center bottom;
    background-repeat:no-repeat;
}

Dein Artikel liegt ja im umgebenden "main" Container und diesem ARTIKEL weißt Du die Klasse ".hintergrund01" zu.
Jetzt musst Du dazu den passenden CSS-Selektor haben.

Code:

body #main .hintergrund01

sollte der richtige sein, ohne Euren / Deinen Code zu kennen.

Gruß
tschero

**Norbert001** · 30.04.2014, 07:26

Hi tschero

herzlichen Dank für die schnelle Antwort.
Ich habe da geändert aber ein Bild wird nicht angezeigt.
Hier der Link http://www.baecker-huth.de/

Wenn ich mit Firebug schaue, she ich diesen Code

Code:

<div class="inside"><div id="startseite" class="mod_article .hintergrund01 first last block">

Beim Eintrag der Klasse ".hintergrund01", ist der .Punkt da richtig?

**tschero** · 30.04.2014, 08:06

Hi,

wenn Du die "background-position" rausnimmst ist Dein Bild zu sehen.
Der Punkt wird beim Eintrag der CSS Klassen im Backend weggelassen.

Gruß
tschero