There are a number of issues that need to be solved to display the background of a “header” outside the area of the page in which the contents of the “current” Passage are shown.
To demonstrate the main cause of the issues I created a basic test project that consisted of two Passages, one of which I assigned a chapter1 Passage Tag to, and the other I assigned the special header tag to. I added some basic textual content to both Passages, and the TWEE Notation for these Passages looks like the following…
:: Start [chapter1]
The content of the Passage.
:: Passage Header [header]
The content of the Header.
When I viewed the Start Passage in my web-browser and used the web-browser’s Web Developer Tools to inspect the HTML element structure that represents the “story” part of the page it looked something like the following…
<tw-story tags="chapter1">
<tw-passage tags="chapter1">
<tw-sidebar>...</tw-sidebar>
<tw-include type="header" name="Passage Header">The content of the Header.</tw-include>
The content of the Passage.
</tw-passage>
</tw-story>
note: I have removed the HTML elements that make up the content of the side-bar!
If you look at the above structure you will see that the “header” area is actually part (a “child” of) the “passage” area, and this fact is one of the main issues.
To see a more visual example of the above “parent” & “child” situation temporarily add the following CSS to your project’s Story Stylesheet area…
/* Add temporary borders to see the bounderies of each element. */
tw-story {
border: 3px solid orange;
}
tw-passage {
border: 2px solid green;
background-color: green;
}
tw-include[type="header"] {
border: 1px solid red;
}
…and now you will see three coloured rectangles, each surrounding the area of the page used to display the element’s content. And you will see that the Red rectangle of the “header” area is contain within the Green rectangle of the “passage” area, which in turn is contained within the Orange rectangle of the “story” area.
1: The “header” area is displayed inline.
This means that the rest of the content of the “current” Passage will appear directly after that of the “header”, even on the same line as that “header” if its content doesn’t exactly fill the entire width of the “passage” area.
The following CSS changes the “header” area so that it always horizontally fills the “passage” area’s width, which means the rest of the content of the “current” Passage will always start on the line proceeding the “header” content.
/* Make header always fill width of passage area */
tw-include[type="header"] {
display: inline-block;
min-width: 100%;
}
Now the internal area of Red rectangle should be as wide as the Green’s.
2: The “header” area is part of that of the “passage” area.
If I understand correctly, you want the background of the “header” to appear above that of “passage”, so that the top of the passage’s background is not obscured by the header’s background. And currently this will happen because of the “parent” & “child” positioning of those to areas.
You can visually see this by adding a background colour to the temporary CSS being used to display the “passage” area’s Green border, the changed CSS would look something like…
tw-passage {
border: 2px solid green;
background-color: green;
}
To fix the overlapping issue of the “passage” & “header” areas we need to first add a blank area between the top of the “passage” area and that of the “story” area, and then move the area of the “header” upwards so that it appear within that new blank area. The following CSS does this…
/* Add a blank space at the top of passage area so header can appear within it */
tw-passage {
margin-top: 2em;
}
/* Show header above the passage */
tw-include[type="header"] {
display: inline-block;
min-width: 100%;
position: absolute;
top: -2em;
}
Now the Red rectangle show appear above the Green, and any backgrounds assigned to the “header” or “passage” areas should no longer overlap.
warning: I don’t know the height needed to display the content of your “header” area, nor the dimensions of the background image you want to display within that area. So I used a simple value of 2em for both the margin-top attribute and (the position related) top attribute in my sample CSS code.
You will need to change that 2em value to something that is meaningful to the content you are displaying.
note: Don’t forget to remove the temporary coloured borders and the Green background colour CSS from your project.