Hallo werte Selfgemeinde!
Ich bin mir zwar ziemlich sicher, dass das mit CSS alleine nicht machbar ist, aber eben nur "ziemlich" und nicht 100%ig sicher. Deshalb möchte ich hier noch mal nachfragen.
Es geht um einen Header. Dieser hat 3 verschiedene Hintergrundgrafiken:
1. eine sich per 'repeat-x' wiederholende Grafik
2. eine Grafik mit fester Größe (bspw. 100 x 200px)
3. eine per 'background-size' gestretchte Grafik (100% x 200px)
Das Header-Element selber geht über die volle Seitenbreite (width: 100%).
Darin horizontal zentriert (margin: 0 auto) befindet sich ein weiteres Element mit fester Breite. Dieses beginnt mit der 2. Hintergrundgrafik.
Nun soll díe 3. Hintergrundgrafik also bei 100px links von der 2. beginnen und bis zum rechten Seitenrand gehen.
Jemand eine Idee?
Was den HTML- und CSS-Code anbelangt bin ich völlig flexibel.
Hier noch eine Skizze, um das gewünschte Resultat zu verdeutlichen:
| Header |
|<- 1. Grafik ->|
| |
| | horiz. zentriertes Element | |
| |<- 2. Grafik 100px breit | |
| | | |
| |<- 100px ->|<- 3. Grafik bis zum rechten Seitenrand | ->|
| | | |
Wie gesagt, die Frage ist, ob es eine reine CSS-Lösung (ohne feste Seitenbreite) gibt?
Multiple Backgrounds können auch verwendet werden.
Bin für jede Anregung dankbar!
Gruß Gunther