---
title: "Verschiedene Hintergrundbinder mit css im Headerbereich"
url: "https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage","HTML & CSS"]
created: "2006-06-30"
last_reply: "2006-07-26"
replies: 14
solved: false
page: 1
pages: 1
lang: "de"
---

# Verschiedene Hintergrundbinder mit css im Headerbereich

Frontend › Barrierefreiheit · 14 Antworten · gestartet 2006-06-30

## Eröffnungsbeitrag

**Typo-Kathrin** · 2006-06-30 · [Beitrag #1](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/1)

Hallo!

Ich habe folgendes Problem:

Ich habe ein html-Template, was im Header-Div ein mit css eingebundenes Hintergrundbild hat.
Jetzt sollen bei verschiedenen Seiten des Webs verschiedene Bilder für den Header-Div verwendet und angezeigt werden.

Kann mir jemand eine saubere und einfache Lösung erklären?

Ich bin eine ziemlich "blutige" Typo3-Anfängerin....

## Antworten

### [#2](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/2) · ONeill · 2006-06-30

Du könntest per Condition die aktuelle ID abfragen und dann den Background nicht in der CSS Datei setzen sondern als direkte Formatierung im Headerbereich.

Quasi so:

```typoscript
[id = 9]
      seite.headerData.1 = TEXT
      seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>

[id = 10]
      seite.headerData.1 = TEXT
      seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>

[GLOBAL]
```

usw.! Für die Condition müsste PDInRootLine gehen, musst du mal in der Ref gucken.

So kannst du für jede Seite in anderes Bild auswählen und per CSS einbinden

### [#3](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/3) · Typo-Kathrin · 2006-06-30

> **ONeill schrieb:**
>
> Du könntest per Condition die aktuelle ID abfragen und dann den Background nicht in der CSS Datei setzen sondern als direkte Formatierung im Headerbereich.
>
> Quasi so:
>
> ```typoscript
> [id = 9]
>       seite.headerData.1 = TEXT
>       seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
>
> [id = 10]
>       seite.headerData.1 = TEXT
>       seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
>
> [GLOBAL]
> ```
>
> usw.! Für die Condition müsste PDInRootLine gehen, musst du mal in der Ref gucken.
>
> So kannst du für jede Seite in anderes Bild auswählen und per CSS einbinden

Danke für die Schnelle Antwort! Aber: Wie ich schon schrieb, ich beschäftige mich seit ca. 5 Tagen mit Typo3 (absolute Anfängerin). Deshalb weiß ich mit "Condition müsste PDInRootLine " leider nicht viel anzufangen.
Kannst Du mir auf die Sprünge helfen?

### [#4](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/4) · Unbekannter Benutzer · 2006-07-01

Hi,
ich helfe dir einfach mal...

also Details zu Conditions findest du hier in der Referenz.
Hier ist die Variante mit PIDinRootline

```typoscript
[PIDinRootline = 10]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[GLOBAL]
```

Ich habe mal das Beispiel aufgegriffen. Das hieße jetzt, das wenn die Seite mit der ID 10 ODER eine Seite unterhalb von dieser angezeigt wird, wird das gemacht, was dazwischen und GLOBAL steht. Das kann man natürlich für jede PID machen. Wenn du wirklich für jede Seite eine eigene Datei haben willst, ist aber eine Lösung über Levelmedia Slide die elegante Wahl. Das ist dann etwas komplizierter.

### [#5](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/5) · Typo-Kathrin · 2006-07-03

> **Kitsunet schrieb:**
>
> Hi,
> ich helfe dir einfach mal...
>
> also Details zu Conditions findest du hier in der Referenz.
> Hier ist die Variante mit PIDinRootline
>
> ```typoscript
> [PIDinRootline = 10]
> seite.headerData.1 = TEXT
> seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
> [GLOBAL]
> ```
>
> Ich habe mal das Beispiel aufgegriffen. Das hieße jetzt, das wenn die Seite mit der ID 10 ODER eine Seite unterhalb von dieser angezeigt wird, wird das gemacht, was dazwischen und GLOBAL steht. Das kann man natürlich für jede PID machen. Wenn du wirklich für jede Seite eine eigene Datei haben willst, ist aber eine Lösung über Levelmedia Slide die elegante Wahl. Das ist dann etwas komplizierter.

Vielen Dank!
Inzwischen habe ich das mit Levelmedia auch gefunden - nur leider: Es funktioniert (noch) nicht.

Hier ist mein Script.
Kann jemand einen fehler sehen?

```typoscript
10.marks.ATMOBILD = COA
marks.ATMOBILD {
   20 = TEXT
   20.value = style="background-image: url(

   30 = TEXT
   30{
   value = fileadmin/img/hg_kopf.png
   override {
   required = 1
   data = levelmedia: -1, "slide"
   wrap = uploads/media/|
   listNum = 1
     }
   }

   40 = TEXT
   40.value =
     );background-repeat:no-repeat;background-position:top left;"
} 

Vielen Dank schon mal!
```

### [#6](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/6) · steffenk · 2006-07-03

ein TEXT-Objekt kann man m.E. nicht über levelmedia mit einem Bild versehen, dazu brauchst Du schon ein IMAGE-Objekt.
Das einfachste Beispiel ist

```typoscript
temp.HeaderPic = IMAGE
temp.HeaderPic {
 file = fileadmin/images/header.gif
 file.import.data = levelmedia: -1, "slide"
 file.import = uploads/media/
 file.import.listNum = 0
 file.import.override.field = media
}
```

### [#7](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/7) · Typo-Kathrin · 2006-07-03

> **steffenk schrieb:**
>
> ein TEXT-Objekt kann man m.E. nicht über levelmedia mit einem Bild versehen, dazu brauchst Du schon ein IMAGE-Objekt.
> Das einfachste Beispiel ist
>
> ```typoscript
> temp.HeaderPic = IMAGE
> temp.HeaderPic {
>  file = fileadmin/images/header.gif
>  file.import.data = levelmedia: -1, "slide"
>  file.import = uploads/media/
>  file.import.listNum = 0
>  file.import.override.field = media
> }
> ```

HM, ich will aber doch kein Bild übergeben, sondern eine style-Definition. Das ist doch nichts weiter als Text?! Oder?

### [#8](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/8) · steffenk · 2006-07-03

ja klar, kann auch sein, das ich daneben liege.

Wie wärs mit listNum = 0 ? Die Bilder fangen immer mit Index 0 an.

### [#9](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/9) · ONeill · 2006-07-03

Im Referenzbereich steht eine Lösung für dein Problem in Kombination mit Kitsunets Antwort:

```typoscript
[PIDupinRootline=1]
[else]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[end]
[PIDupinRootline=2]
[else]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[end]
[PIDupinRootline=3]
[else]
seite.headerData.1 = TEXT
seite.headerData.1.value = <style type="text/css"> #Header { background-images: url(...); } </style>
[end]
```

So kannst du für jede spezielle Seite einen bestimmten header über CSS definieren.

### [#10](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/10) · Unbekannter Benutzer · 2006-07-03

Also ich würde mal sagen der Code müsste so funktionieren, allerdings fängt ListNum bei 0 an zu zählen, wenn du also nicht absichtlich das zweite Bild willst, muss es ListNum = 0 heißen.

Es ginge auch mit einem Image Objekt wie steffenk schrieb, aber das hilft dir ja nicht, weil du ein Background-Image willst. Alternativ ginge noch ein IMG_RESOURCE, der Code sieht ähnlich aus wie bei Image, nur das das Ergebnis nicht ein Imagetag sondern nur der Pfad zum Bild ist.

Falls das alles nicht hilft poste mal für den entsprechenden Bereich den HTML-Quellcode, der im Frontend rauskommt, wenn du das versuchst.

### [#11](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/11) · Typo-Kathrin · 2006-07-04

> **Kitsunet schrieb:**
>
> Also ich würde mal sagen der Code müsste so funktionieren, allerdings fängt ListNum bei 0 an zu zählen, wenn du also nicht absichtlich das zweite Bild willst, muss es ListNum = 0 heißen.
>
> Es ginge auch mit einem Image Objekt wie steffenk schrieb, aber das hilft dir ja nicht, weil du ein Background-Image willst. Alternativ ginge noch ein IMG_RESOURCE, der Code sieht ähnlich aus wie bei Image, nur das das Ergebnis nicht ein Imagetag sondern nur der Pfad zum Bild ist.
>
> Falls das alles nicht hilft poste mal für den entsprechenden Bereich den HTML-Quellcode, der im Frontend rauskommt, wenn du das versuchst.

Vielen Dank für Eure Hilfe. Der Code hat tatsächlich funktioniert.
Es hat oben bei den marks nur die 10 gefehlt - und - listNum=0 ist natürlich auch richtig!

Danke noch mal!
Je mehr man sich damit beschäftigt, desto mehr blickt man langsam auch durch. Macht echt Spaß!

### [#12](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/12) · ONeill · 2006-07-04

Layout und Inhalt sollten getrennt werden.

### [#13](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/13) · Typo-Kathrin · 2006-07-04

> **ONeill schrieb:**
>
> Layout und Inhalt sollten getrennt werden.

Ist er doch.
Das Hintergrundbild ist doch per css eingebunden.

????

### [#14](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/14) · ONeill · 2006-07-04

Dann habe ich den TS Code falsch intepretiert. :)
Dann ist ja alles klar ;)

### [#15](https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich/15) · workfare · 2006-07-26

Danke!
Hat funktioniert, allerdings heisst es **backgroung-image**, Singular!
(Bei Typo-Kathrin steht es auch richtig)

---

Quelle: „Verschiedene Hintergrundbinder mit css im Headerbereich“, typo3.net, https://www.typo3.net/d/45642-verschiedene-hintergrundbinder-mit-css-im-headerbereich
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.