Databases
StackOverflow2013
Postsdbo
POFull-width header and footer consisting of three images, one of them of variable width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFull-width header and footer consisting of three images, one of them of variable width
    text
    copied!<p>I am trying to get a header and footer consisting of three sub-elements to work. The header and footer are purely cosmetical and not intended for navigation and are supposed to span the full width of the page. For both the header and footer I've got three images each to work with, one fixed-width unique image for each side and a 1px image that is supposed to fill the space inbetween those.</p> <p><img src="https://i.stack.imgur.com/ZUZyI.jpg" alt="Concept image"></p> <p>The HTML of the header is pretty basic:</p> <pre><code>&lt;div id="header-container"&gt; &lt;div id="header-left"&gt; &lt;/div&gt; &lt;div id="header-mid"&gt; &lt;/div&gt; &lt;div id="header-right"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I've got quite close with absolute positioning, but then the header is fixed and will always stay on top, which is definitely unintended behaviour (#header-mid is unnecessary here):</p> <pre><code>div#header-container { position: absolute; top: 0; left: 0; width: 100%; height: 70px; background: url(images/header-spacer.png) repeat-x; } div#header-left { position: absolute; width: 600px; height: 70px; top: 0; left: 0; background: url(images/header-left.png); } div#header-mid { display: none; } div#header-right { position: absolute; width: 600px; height: 70px; top: 0; right: 0; background: url(images/header-right.png); } </code></pre> <p><a href="http://jsfiddle.net/5j6UD/" rel="nofollow noreferrer">JSFiddle example with images</a> (make sure your Result-window is wider than 1200px)</p> <p>Using relative positioning I was not able to get the background-images to show and using HTML to show the images won't work with the header-mid.</p> <p>I've found an incredibly lot of guides on full-width headers/footers on the web, but none that discussed explicitly this kind of combination.</p> <p>&nbsp; </p> <p>Thanks to <a href="https://stackoverflow.com/users/2324697/soheil-gh">Soheil Gh</a> for answering the question for the header, however that method does not apply to the footer. <a href="http://jsfiddle.net/5j6UD/2/" rel="nofollow noreferrer">Here is an additional JSFiddle including the footer</a>.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload