Da ich nicht weiss wie dein Layout aussehen soll kann ich nichts dazu sagen.
Ist die Seite dynamisch oder statisch usw.
Soll der BG über die ganze breite gehen oder nur so breit wie der Header sein?
Also ich löse das eigentlich immer so.
Mein Background kommt immer direkt in den Body und wird per CSS angepasst.
Der Header welcher bei mir bei einer statischen Seite meist ein Bild als auch das Logo enthält kommt immer in den Header Bereich als bg.
Sofern Du ein Bild als bg in den Headerbereich einfügen willst und darüber ein Logo platzieren willst, musst Du das Logo prinzipiell auch übers CSS platzieren und ansprechen.
Du erstellst z.b. ein Modul mit folgendem HTML Code:
HTML-Code:
<div id="logo">
<a href="{{env::url}}" title="logo"><img src="tl_files/Pfad/Dateiname.png" alt="logo" /></a>
</div>
So wird es auch standardmässig erklärt.
Den insertTag da oben kannst Du auch weglassen.
Dann muss es natürlich auch einen Eintrag in deiner CSS geben mit #logo .
Über diesen Selektor kannst Du jetzt das Aussehen und Position deines Logos formatieren.
Um das jetzt detailliert zu erklären müsste ich einen Link von der Seite haben.
EDIT:
Wenn es so aussehen soll wie in deinem geposteten Bild oben machst Du dir glaub ich n bissl zu viel Arbeit.
Mal grob erklärt.
Ich würde einfach einen grauen Balken als Hintergrund erstellen der die gewünschte Höhe hat und 1px breit ist.
Dann packst Du das einfach in den #body und repeatest es nach rechts (x).
Dann gehst Du her und gibst deinem Submenücontainer eine feste breite die genau so breit ist wie die eigentliche Seite. Höhe nach Wunsch anpassen.
Einfach dem Submenü einen weißen bzw. den gewünschten Hintergrund geben und fertig.
Entweder mit der Farbangabe oder einem Hintergrundbild.
Oder Du machst Schritt 1 und haust deinen BG in den Body und fügst in den Header einfach nochmal ein BG ein mit grau/weiss wie Du das haben willst.
Dann hast Du genau das was du willst.
Wie Du das aber lösen willst ist eher Geschmackssache.