---
title: "Bild als CSS background-image"
url: "https://www.typo3.net/d/119313-bild-als-css-background-image"
source: "typo3.net"
tags: ["Extensions","Fluid","Frage","TYPO3 6.x"]
created: "2014-12-08"
last_reply: "2014-12-08"
replies: 3
solved: true
page: 1
pages: 1
lang: "de"
---

# Bild als CSS background-image

Extensions · 3 Antworten · gelöst · gestartet 2014-12-08

## Frage

**joni** · 2014-12-08 · [Beitrag #1](https://www.typo3.net/d/119313-bild-als-css-background-image/1)

Hallo Zusammen
Ich bin beim Layouten der News-Ansichten auf ein Problem gestossen:
Wie setze ich ein Bild (Fal-Media) in meinem Template als CSS background-image?
Das Bild as <img> geht problemlos. Auch mit {mediaElement.originalResource.publicUrl} bekomme ich es in ein div als Hintergrundbild. Doch ich möchte ja nicht den Pfad des Originals, sondern ein "_processed_" Bild, wo ich die Dimensionen angeben kann.

Ich weiss, dass ist mehr ein Fluid-Problem, aber vielleicht hat das ja jem. mit der News-Ext auch schon versucht?

Ich verwende die news (3.0.1).

Vielen Dank für eure Hilfe.

## Beste Antwort

**joni** · 2014-12-08 · [Beitrag #4](https://www.typo3.net/d/119313-bild-als-css-background-image/4)

Nun hats geklappt. Habe einen neuen Viewhelper kennen gelernt: f:uri.image
So sieht das ganze dann aus:
{f:uri.image(src:mediaElement.uid, treatIdAsReference:1, width:200px)}

## Antworten

### [#2](https://www.typo3.net/d/119313-bild-als-css-background-image/2) · toifel · 2014-12-08

Du kannst dir das komplette {mediaElement} in der Debug-Ansicht ausgeben lassen - so solltest du zumindest das gesuchte Objekt finden... falls es so vorhanden ist, wie du es brauchst:

```html
<f:debug>{mediaElement}</f:debug>
```

### [#3](https://www.typo3.net/d/119313-bild-als-css-background-image/3) · joni · 2014-12-08

Vielen Dank für deine Antwort. Das habe ich auch schon gemacht. Und so bin ich auf {mediaElement.originalResource.publicUrl} gekommen. Aber so wie ich das verstehe, gelange ich so nur an die Originalquelle. Und ich möchte den Pfad des Bildes ausgeben, dass ich vorher noch skaliert/gecropt habe.
Man kann ja ein Bild in Fluid als inline Notation schreiben: {f:image(src:'{mediaElement.uid}', alt:'Text', width:'200px')}, aber so gelange ich auch nur ans Bild und nicht an den Pfad.

Ich habe mir überlegt, das Bild zuerst per Typoscript zu skalieren/croppen und danach mit dem cObject-Viewhelper ({post.viewCount -> f:cObject(typoscriptObjectPath: 'lib.myCounter')}) wieder ins Template zu speisen.
Doch weiss ich nicht genau, wie ich per TS an die Bilder der Newseinträge komme.

Oder was wäre der beste Weg, ein Newsbild als background-image ausgeben zu können?

### [#4](https://www.typo3.net/d/119313-bild-als-css-background-image/4) · joni · 2014-12-08 · Beste Antwort

(Text siehe oben unter „Beste Antwort“.)

---

Quelle: „Bild als CSS background-image“, typo3.net, https://www.typo3.net/d/119313-bild-als-css-background-image
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.