---
title: "Überschrift mit unterlegter 2-geteilter Grafik???"
url: "https://www.typo3.net/d/77601-ueberschrift-mit-unterlegter-2-geteilter-grafik"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage","HTML & CSS","Inhaltselemente"]
created: "2008-05-23"
last_reply: "2010-03-16"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Überschrift mit unterlegter 2-geteilter Grafik???

Frontend › Barrierefreiheit · 2 Antworten · gestartet 2008-05-23

## Eröffnungsbeitrag

**anklein1** · 2008-05-23 · [Beitrag #1](https://www.typo3.net/d/77601-ueberschrift-mit-unterlegter-2-geteilter-grafik/1)

Hallo alle zusammen!!

Ich will Überschriften mit Grafiken unterlegen und arbeite mit eigenen CSS. Die Überschriften sind je nach Inhalt unterschiedlich breit und deshalb habe ich einen linken und einen rechten  teil der Grafik. Wie stelle ich es beim Einfügen des Inhaltes an dass auch noch <span> davor steht???
Hier der Teil der CSS

```html
h2{
	font:1em/1em Arial, Verdana,sans-serif;
	margin:1em 0em 1em 0em;
	padding:0;
	height:auto;
	background:url(../fileadmin/images/h2-right.gif) top right no-repeat;
}

h2 span{
	font-weight:bold;
	color:#fff;
	padding:6px 8px 4px 8px;
	display:block;
	background:url(../fileadmin/images/h2-left.gif) top left no-repeat;
}

h2 span a{
	font-weight:normal;
}
```

Beim Betrachten des generierten Quellcodes in der Ansicht steht dann

```html
<div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">1. Geltungsbereich</h2></div>
```

dort stehen soll aber:

```html
<h2><span>1. Geltungsbereich</span></h2>
```

Weis jemand wie das Problem zu lösen ist???

Vielen Dank für eure Antwort!

Liebe Grüße
Andreas

## Antworten

### [#2](https://www.typo3.net/d/77601-ueberschrift-mit-unterlegter-2-geteilter-grafik/2) · robhuhn · 2008-07-13

Würde es nicht auch gehen, wenn es eine Grafik ist, die immer wiederholt wird und rechts halt ein bisschen rausschaut?

```html
h2{
        font:1em/1em Arial, Verdana,sans-serif;
        margin:1em 0em 1em 0em;
        padding:0;
        height:auto;
        background:url(../fileadmin/images/h2-ganz.gif) top left repeat-x; 
        padding-right: /*Breite von dem Zipfel, der rechts rausschauen soll*/
}
```

So hätte ich das gemacht...
Grüße
robhuhn

### [#3](https://www.typo3.net/d/77601-ueberschrift-mit-unterlegter-2-geteilter-grafik/3) · trunbwn · 2010-03-16

Hi,
benutz doch die von typo generierten klassen dazu..

csc-header oder csc-header-n1

tru

---

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