CSS Eigenschaft, drei Hintergrund-Bilder

[Xin]

Mir fällt kein sinnvoller Header ein, vermutlich auch der Grund, warum google mir keine vernünftige Antwort liefern kann. ^^

Folgendes Problem:
Ich habe eine Überschrift, der ich ein Bild voranstellen möchte, anschließend benötige ich einen Hintergrund auf dem die Überschrift zu sehen sein wird und abschließend wieder eine Abschlussgrafik.

Grafik| Text mit Hintergrund | Grafik

Dabei weiß ich nicht wie breit der Bildschirm ist, die Hintergrundgrafik muss sich also entsprechend breit machen. Die Grafiken vorne und hinten haben feste Größen.
Wie beschreibe ich das in ein CSS-Div?

[cloidnerux]

Du hast ersteinmal noch zwei img-tags, denen du text-alignment left/right zuweist, damit diese immer links und rechts sind.
Den text in der Mitte packst du in ein eigenes Div und weist ihm text-align: center zu.
Dann kannst du noch mit background-color oder background-img den Hintergrund verändern, zumindest bin ich der Meinung das man das so machen kann....

[Xin]

Du hast ersteinmal noch zwei img-tags, denen du text-alignment left/right zuweist, damit diese immer links und rechts sind.
Den text in der Mitte packst du in ein eigenes Div und weist ihm text-align: center zu.
Dann kannst du noch mit background-color oder background-img den Hintergrund verändern, zumindest bin ich der Meinung das man das so machen kann....

Ich habe nur <h1>Überschrift</h1> und daraus muss ich wie beschrieben drei Grafiken positionieren.

[Dubbel]

Also multiple Hintergrundbilder gibts erst mit CSS3 ( http://www.css3.info/preview/multiple-backgrounds/ )...hier gehts dann halt nicht anders als H1 width:100% zuzuweisen, die Hintergrundgrafikgrafik als background-image und die beiden Randbilder mit position:absolute; und right:0px; bzw. left:0px; in die Ecken zu verbannen (das H1-Element muss dann natürlich position:relative; zugewiesen bekommen).

Oder hab ich das Problem falsch verstanden? ^^

[Xin]

Also multiple Hintergrundbilder gibts erst mit CSS3 ( http://www.css3.info/preview/multiple-backgrounds/ )...hier gehts dann halt nicht anders als H1 width:100% zuzuweisen, die Hintergrundgrafikgrafik als background-image und die beiden Randbilder mit position:absolute; und right:0px; bzw. left:0px; in die Ecken zu verbannen (das H1-Element muss dann natürlich position:relative; zugewiesen bekommen).

Wie sieht das dann in CSS aus?
Wie gesagt - ich habe nur den Text <h1>Überschrift</h1> und muss nun h1 in CSS so beschreiben, dass ich da eben eine Startgrafik links, eine Hintergrundgrafik und Endgrafik rechts haben.

Oder hab ich das Problem falsch verstanden? ^^

Wenn Du mir den CSS Code geben kannst nicht

[cloidnerux]

Wie gesagt - ich habe nur den Text <h1>Überschrift</h1> und muss nun h1 in CSS so beschreiben, dass ich da eben eine Startgrafik links, eine Hintergrundgrafik und Endgrafik rechts haben.

Mir ist keine Möglichkeit bekannt, über eine CSS-Eigenschaft Bilder einem Steuerelement zuzuweisen, da müsstest du schon die Bilder im HTML einbinden.

[AnGaiNoR]

Mir würden noch generierte Inhalte einfallen... Sicher nicht die sauberste Lösung, aber du kannst ja mal schauen, ob dir das weiterhilft.

[Xin]

Mir würden noch generierte Inhalte einfallen... Sicher nicht die sauberste Lösung, aber du kannst ja mal schauen, ob dir das weiterhilft.

Was meinst Du mit genierierten Inhalten?

Das Problem ist, dass ich versuche (nicht von mir) generierten Inhalten mein Design aufzuschwatzen. ^^

[AnGaiNoR]

Generierter Inhalt sieht zum Beispiel so aus:

HTML:

Code: Alles auswählen

<div id="Header">
  <h1>&Uuml;berschrift</h1>
</div>

CSS:

Code: Alles auswählen

#Header h1:before {
  content: url('bild_vorm_header.jpg');
}

#Header h1:after {
  content: url('bild_nachm_header.jpg');
}

[Xin]

Code: Alles auswählen

#Header h1:before {
  content: url('bild_vorm_header.jpg');
}

#Header h1:after {
  content: url('bild_nachm_header.jpg');
}

Scheiß was auf den Div #Header... das ist genau, was ich suche... ^^ Das kannte ich noch gar nicht.

Danke