[CSS] Hintergrundbild dynamisch für Überschrift mit :before und :after?

Hallo zusammen,

Entschuldigung für den Titel, aber mit ist nichts Besseres eingefallen.
Ich hab ein Problem bzw. stehe ich auf dem Schlauch. Das Bild Anhang 16088, hätte ich gerne "dynamisch" als Hintergrund für Überschriften. Das "Problem" ist, dass die Überschriften später ja alle unterschiedlich lang sein werden und da hätte ich den "mittleren" Teil immer gerne passend in der Breite.

Ich dachte mit dass ich das Bild in drei Bereiche aufteile und dann den mittleren Hauptteil als Hintergrund z.B für den H1 Tag nehme und mit :before und :after jeweils die anderen. Jedoch klappt das überhaupt nicht. :(

Wahrscheinlich sitzt das Problem zwischen den Ohren :)

Ich hoffe ich konnte mich einigermaßen verständlich ausdrücken und danke euch jetzt schon für eure Hilfe.

Grüße
Dj-Harem

Ich weiss zwar nicht wie du es versucht hast, tippe aber mal, dass deine :before und :after einfach nicht die Breite und Höhe haben, um deine Hintergrundbilder anzuzeigen. Das sollte mit display:inline-block und dem Bild entsprechender width und height klappen.

Hallo,

vielen Dank für deine schnelle Antwort tab.
Ich hab es bis jetzt so probiert.
Angezeigt bekomme ich die Bilder so zwar jetzt schon, aber die Ausrichtung der Bilder macht mich noch fertig :)
Ich bekomme die linke Seite einfach nicht ausgerichtet, sonst sieht es schon mal sehr akzeptabel aus.
Wenn mir diesbezüglich noch jemand eine kurze Hilfestellung geben könnte wäre das sehr genial.

Grüße
Dj-Harem

HTML-Code:

---

<h1><span>Überschrift</span></h1>

---

Code:

---

.mod_eventreader .layout_full h1:before,
.mod_eventreader .layout_full h1:after {
    height:50px;
    position:absolute;
    content: '';

.mod_eventreader .layout_full h1:before {
    width:360px;
    background-image:url("files/theme/img/Banner_01.png");
    background-position:left center;
    background-repeat:no-repeat;

.mod_eventreader .layout_full h1:after {
    width:357px;
    background-image:url("files/theme/img/Banner_03.png");
    background-position:right center;
    background-repeat:no-repeat;

.mod_eventreader .layout_full h1 span {
    display: inline-block;
    padding-right:5px;
    padding-left:5px;
    background-image:url("files/theme/img/Banner_02.png");
    background-position:left center;
    background-repeat:repeat-x;
    color:#FFF;

---

Andere Lösung:

Code:

---

h1 {
        text-align: center;
        background: url("strich.png") repeat-x;
}

h1 span {
        position: relative;
        background: #000;
}

h1 span:before,
h1 span:after {
        position: absolute;
        top: 0;
        width: 10px; (oder wie auch immer)
        height: 50px;
        content: "";
        display: block;
}

h1 span:before {
        left: -10px;
        background: url("linker-pfeil.jpg");
}

h1 span:after {
        right: -10px;
        background: url("rechter-pfeil.jpg");
}

---

H1 bekommt also nur die Strich-Grafik mit repeat-x.

Das span erhält den dunklen Grauton in der Mitte deiner Grafik.

Mit :after und :before beim span platzierst du dann noch links und rechts vom span jeweils den "Pfeil".

Hallo dazzle89,

vielen Dank nochmal für deine Antwort. Hat zwar so leider nicht geklappt, aber mit immerhin einen Denkanstoß gegeben und jetzt funktioniert es :)

Ich habe die ganzen styles direkt auf das Span Element angewendet und dann noch bei :after das Element mit "right" und "width" ausgestattet und das war's.

Grüße
Dj-Harem