---
title: "Überschrift mit vorgesetzter Grafik"
url: "https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik"
source: "typo3.net"
tags: ["Allgemein","Frage","HTML & CSS"]
created: "2008-04-29"
last_reply: "2008-04-29"
replies: 10
solved: false
page: 1
pages: 1
lang: "de"
---

# Überschrift mit vorgesetzter Grafik

Allgemein · 10 Antworten · gestartet 2008-04-29

## Eröffnungsbeitrag

**inu** · 2008-04-29 · [Beitrag #1](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/1)

Hallo Leute,

gern möchte ich erreichen, dass bei meiner Überschrift ein grafisches Element vorgesetzt wird (z.B. ein Dreieck). Wo kann ich soetwas einstellen? Wie kann ich das ganze vertikal gegenüber der Überschrift zentrieren?

## Antworten

### [#2](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/2) · Wool · 2008-04-29

mit CSS?

Stichworte:
background-image, background-position, repeat:no-repeat;

nur als Beispiel...

### [#3](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/3) · inu · 2008-04-29

#angry#

ja, selbstverständlich! Das hat man nun davon, wenn man sich so auf's TYPO3 versteift!

### [#4](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/4) · just2b · 2008-04-29

nicht vergessen beiträge auf gelöst zu stellen. ich habs nochmal für dich gemacht

georg

### [#5](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/5) · inu · 2008-04-29

Das mit dem CCS und H1 scheint wohl doch nicht so einfach zu sein. Ich habe jetzt mal folgendes verwendet:

```html
h1 { font-size: 133.33%; padding-bottom:1ex; 
     background: url(..images/dreieck.gif);
   }
```

Selbst wenn ich "background" durch "background-image" ersetze, scheint dies keinerlei Wirkung zu zeigen. Das Bild ist vorhanden; das habe ich geprüft.

Wo ist mein Denkfehler?

### [#6](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/6) · just2b · 2008-04-29

Hallo,

> (..images/dreieck.gif)

als Pfad gibts nicht

entweder ../images oder images aber nicht so und immer relativ zum CSS file

georg

### [#7](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/7) · inu · 2008-04-29

okay, danke. Habe das jetzt wie folgt geändert:

```html
h1 { font-size: 133.33%; padding-bottom:1ex; 
     padding-left:12px;
     background: url(../images/dreieck.gif) no-repeat left center;
   }
```

Das Bild wird angezeigt; eine vertikale Zentrierung erfolgt aber leider nicht  :'(

### [#8](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/8) · just2b · 2008-04-29

Hallo,

die Grafik wird definitiv zentriert im h1, aber man muss halt noch schauen was für ein padding/margin wird dort gesetzt, usw...  ohne url wirds schwer

Georg

### [#9](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/9) · inu · 2008-04-29

Habe jetzt mal die Hintergrundfarbe von H1 auf rot gesetzt, um das ganze zu durchschauen. Du hast recht, die Grafik wird zentriert. Jedoch nicht der Text!

### [#10](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/10) · just2b · 2008-04-29

ja das musst du halt mit einem padding-top u.ä machen

georg

### [#11](https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik/11) · inu · 2008-04-29

Danke @all!

mit padding läuft es so, wie ich es mir vorstelle.

---

Quelle: „Überschrift mit vorgesetzter Grafik“, typo3.net, https://www.typo3.net/d/76655-ueberschrift-mit-vorgesetzter-grafik
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.