---
title: "Bilder als background-image in einem DIV Content"
url: "https://www.typo3.net/d/113548-bilder-als-background-image-in-einem-div-content"
source: "typo3.net"
tags: ["Allgemein","Bilder","Frage","HTML & CSS"]
created: "2013-01-21"
last_reply: "2013-01-23"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Bilder als background-image in einem DIV Content

Allgemein · 2 Antworten · gestartet 2013-01-21

## Eröffnungsbeitrag

**remedien** · 2013-01-21 · [Beitrag #1](https://www.typo3.net/d/113548-bilder-als-background-image-in-einem-div-content/1)

Hi,
ich habe ein Forumbeitrag gelesen bei dem ich  meine, dass es mein Problem lösen könnte.
[/d/96111-bildpfad-name-des-aktuellen-contentobjektes](https://www.typo3.net/d/96111-bildpfad-name-des-aktuellen-contentobjektes)

Folgende Problematik:
Ich möchte ebenfalls in einem DIV Container ein "background-image" im tt_content.textpic einfügen.
In diesem Beitrag habe ich gesehen, wie es gelöst wurde.
Jetzt suche ich nach der Lösung für mein Problem

Ich habe verschiedene Layouts, die ich auswählen kann. In einem Layout möchte ich, dass das erste Bild listNum = 0 verwendet wird.
Hier mein TS meiner Rootseite

```typoscript
# TypoScript, Page TSconfig 
# overwrite type labels
TCEFORM.tt_content {
   header_layout.altLabels.0 = normale Breite
   header_layout.altLabels.1 = 400 Pixel Breite
   header_layout.altLabels.2 = Hotel Zeile
}
# TypoScript, Page TSconfig 
# add new layouts
TCEFORM.tt_content{
   header_layout.addItems.3 = Apartment Zeile
   header_layout.addItems.4 = Kontakt Zeile
}
# TypoScript, Page TSconfig 
# remove layouts
TCEFORM.tt_content{
  header_layout.removeItems = 5,6,10
}
```

Hier mein TS Setup

```typoscript
seite.10.marks {
  CONTENT_GRAU = CONTENT
  CONTENT_GRAU {
    table = tt_content
    select.orderBy = sorting
    select.where = colPos = 0
    wrap = <div style="width: 770px;">|</div>
  }
   # Seitenlayout Auswahl
   CONTENT_GRAU.renderObj.stdWrap.innerWrap.cObject=CASE
   CONTENT_GRAU.renderObj.stdWrap.innerWrap.cObject{
      key.field = header_layout
 
      // Default
      default=TEXT
      default.value=<div class="layout0">|</div>
 
      // layout 1 - 400 Pixel Breite
      1=TEXT
      # Hier soll das erste Bild geladen werden listNum = 0
      1.value=<div style="background-image:url(fileadmin/template/uploads/|); width:400px; padding-top:20px;text-align:justify;">|</div>
  }
}
```

Irgendwie stehe ich auf dem Schlauch, wie ich das hinbekommen soll.
Grüße

## Antworten

### [#2](https://www.typo3.net/d/113548-bilder-als-background-image-in-einem-div-content/2) · Chrissli · 2013-01-22

Hallo remedien,

```typoscript
// layout 1 - 400 Pixel Breite
      1=TEXT
      # Hier soll das erste Bild geladen werden listNum = 0
      1.value=<div style="background-image:url(fileadmin/template/uploads/|); width:400px; padding-top:20px;text-align:justify;">|</div>
```

Fehlt irgendwie die Information was hier eingefügt werden soll. Du und ich ( und auch alle anderen die deine Problembeschreibung lesen ) wissen das hier der Bildname rein soll, aber im Typoscript solltest du das auch noch sagen.

Kleiner Hint: in dem von dir verlinkten Thread stehen so lustige Dinge wie imgPath und data = register:IMAGE vielleicht solltest du etwas in der Art auch verwenden XD

### [#3](https://www.typo3.net/d/113548-bilder-als-background-image-in-einem-div-content/3) · remedien · 2013-01-23

Hi,
danke für deine Antwort, bin jetzt schon ein wenig weiter gekommen.
habe jetzt folgenden TS im Setup

```typoscript
   # Seitenlayout Auswahl
   CONTENT_GRAU.renderObj.stdWrap.innerWrap.cObject=CASE
   CONTENT_GRAU.renderObj.stdWrap.innerWrap.cObject{
      key.field = header_layout
 
      // Default
      default=TEXT
      default.value=<div class="layout0">|</div>
 
      // layout 1 - 400 Pixel Breite
      1 = COA
      1 {
        10 = TEXT
        10.value = <div style="width: 400px; padding-top:20px; text-align:justify; background-image:url(/images/
        
        20 = IMAGE
        20 < tt_content.image.imgPath
        
        30 = TEXT
        30.field = image
        
        40 = TEXT
        40.value =);">|</div>
     }
```

Bekomme aber jetzt folgenden HTML im Seitenquelltext

```html
<!--  CONTENT ELEMENT, uid:9/textpic [begin] -->
		<div style="width: 400px; padding-top:20px; text-align:justify; background-image:url(/images/content_bg_start_bett.jpg);">
		<!--  Image block: [begin] -->
			<div class="csc-textpic csc-textpic-left csc-textpic-below csc-textpic-equalheight"><div class="csc-textpic-text">
		<!--  Text: [begin] -->
			<p class="bodytext"> <span class="kurpfalzrot">Unsere Hotelzimmer und Suiten</span> 
</p>
<p class="bodytext">Modern eingerichtete Zimmer sorgen für einen angenehmen und komfortablen Aufenthalt und bieten Ihnen Raum zur Entspannung.</p>
		<!--  Text: [end] -->
			</div><div class="csc-textpic-imagewrap"><div class="csc-textpic-image csc-textpic-last"><img src="typo3temp/pics/f6d508286b.jpg" width="102" height="25" alt="" /></div></div></div>
		<!--  Image block: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:9/textpic [end] -->
```

Ich habe es geschafft, dass ich mein **background-image** habe.
Jetzt muss ich nur noch das img rausschmeisen und die Bildgröße anpassen, da es aus irgendeinem Grund verkleinert wird.
Bin ich auf dem richtigen Weg?

---

Quelle: „Bilder als background-image in einem DIV Content“, typo3.net, https://www.typo3.net/d/113548-bilder-als-background-image-in-einem-div-content
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.