Om nah hoo pez nyeetz, Matthias!
Dann ist der Beginn des 2. Bildes 50% der headerbreite - halbe Spanbreite
Der Beginn des 3. liegt bei 50% der headerbreite - halbe Spanbreite + 100px
Und die Breite des 3. ist 50% der headerbreite + halbe Spanbreite - 100pxoder übersehe ich was?
Also die Variante mit der "Rechnerei" bei der 'background-position' funktioniert so nicht, u.a. weil die 'background-size' der 3. Grafik '100% [Höhe]' ist.
Dann habe ich mit einem Pseudo-Element und 'calc()' experimentiert, und das sogar erfolgreich. Allerdings schränkt das die 'cross browser' Fähigkeiten extrem stark ein. Aber dabei kam mir dann letztendlich die "Erleuchtung", wie es ganz ohne 'calc()' klappt ...!
Lösung:
- HTML
<header id="header">
...
</header>
- CSS
#header {
position: relative;
background: url('bg-img-1');
...
}
#header:before,
#header:after {
content: "";
position: absolute;
top: 0;
left: 50%;
height: 180px;
}
#header:before {
width: 100px;
margin-left: -512px;
background: url('bg-img-2');
background-size: 100px 180px;
background-repeat: no-repeat;
}
#header:after{
right: 0;
margin-left: -412px;
background: url('bg-img-3');
background-size: 100% 180px;
background-repeat: no-repeat;
}
Diese Variante kommt ohne 'multiple background images' und 'calc()' aus, da nur die Pseudo-Elemente '::before' und '::after' verwendet werden. Somit "funktioniert" diese Methode in allen gängigen Browsern und dem IE >= 8.
Besten Dank nochmal Matthias für deine freundliche Unterstützung!
Gruß Gunther