CSS waagerechter Bereich: Hintergrundfarbe + Grafik rechts?

[cumulonimbus8]

Moin!

Gewollt ist ein… sind zwei waagerechte Balken. Sie sollen eine Seite oben und unten begrenzen. Die Seite ist dynamisch breit.
Der Plan ist (oben) eine Grafik der Höhe XY mit einem Farbverlauf (sagen wir 300px breit) links anzudocken und den Rest des Balkens (der Höhe XY) mit einer statischen Farbe zu füllen. Damit kann das bequem beliebig breit werden. Zum Beispiel ginge das so:

<div id="Kopfbereich">
 <div id="Kopfbild"></div>
</div>

#Kopfbereich{
 width:100%;
 background-color:#AAAAAA;
 height:100px;
 margin-top:0px;
}
#Kopfbild{
 float:left;
 width:100%;
 background-image:url("Oben.png");
 background-repeat:no-repeat;
 height:100px;
}

(Ohne Garantie, dass Dinge wie margin-top oder float:left nicht überflüssig sein mögen.)

Der (untere) Balken ist an der Vertikalen spiegelbildlich gestrickt.

<div id="Fussbereich">
 <div id="Fussfbild"></div>
</div>

#Fussbereich{
 width:100%;
 background-color:#AAAAAA;
 height:50px;
 margin-top:0px;
}
#Fussbild{
 float:right;
 width:100%;
 background-image:url("Unten.png");
 background-repeat:no-repeat;
 height:100px;
}

Ich kriege nur die Grafik nicht nach rechts.  Wenigstens auf diese Weise mit CSS. Mit HTML-Hilfe habe ich das gelöst. Es geht mir aber darum die Pfade zu den Grafiken in der CSS zu verwalten, dies zu lernen.
Mit Google finde ich solche (für mich) Brot-und-Butter-Funktionalitäten nicht, und auch kein „Das ist damit nicht möglich; wenigstens nicht so geradeheraus direkt.“

Wie muss ich das Pferd aufzäumen? So was Triviales muss doch auch Trivial zu lösen sein.

CN8

 

[Physikbuddha]

Sei doch bitte so nett, und erstell für uns als Beispiel ein JSFiddle, dass man das besser verstehen kann.

 

[spliffi]

Suchst du eventuell einfach nur nach einer Möglichkeit das CSS Background Image zu positionieren? Dann sollte das CSS Property 'background-position' (vllt noch in Verbindung mit 'background-size') hilfreich sein: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

 

[cumulonimbus8]

Ich komme mit der Anforderung von Physikbuddha nicht klar. Soll ich 2 komplette Files liefern (deren Inhalt) und noch zwei Grafiken?

@spliffi
background-position:right;
So simpel kanns sein wenn einem eine Syntax-Auflistung nur einen Bruchteil der Möglichkeiten nennt. -position kam bei Treffern auf üblichen Sites nicht vor. Und, welch Wunder, was man nicht kennt danach kann man auch nicht suchen.

Merci vielmals,
CN8

 

[funkmasterflow]

@cumulonimbus8
Hast Du Dir jsfiddle mal angeschaut?
Dort kopierst Du dein HTML, CSS und ggf. JavaScript rein und man kann sofort sehen wie sich das verhält. Natürlich kannst Du die Grafiken durch lorempixel oder andere Dummy-Bilder ersetzen.
Dann können wir aber besser verstehen welches Ergebnis dein Code bisher produziert und Dir evtl. bessere Lösungen an die Hand geben.
Ist immer besser als "trockenen" Code zu lesen und sich im Kopf zusammen zu bauen, wie es dann aussehen würde.
Spiel' mit dem Tool vielleicht mal herum. Alternativ auch mit jsbin, codepen o.ä.

 

[cumulonimbus8]

Hast Du Dir jsfiddle mal angeschaut?
Dort kopierst Du dein HTML, CSS und ggf. JavaScript rein

Habe ich. Und ich habe keinen Code den ich einkleben kann. Genaeur gesagt baue nicht nicht Dateien um um genauso schlau zu sein wie vorher da bereits alle essentiellen Codesequenzen gepostet wurden. Und mehr beschreiben könnte ich nicht.
Meine winzigen Codeschnippsel müssten ohne Weiteres zu lesen sein.

CN8