How to create a horizontal bar that stretches across screen but is not in the body tag?

Question

Very basic question!

I have a background pattern that repeats itself throughout the body tag. I would also like to have a top bar and bottom bar (head/footer) to repeat on the x axis - creating a nice sandwich style of solid color, pattern and solid color again for the background.

How can this be accomplished?

The bars need to be 100% width - which is why this isn't being done through the content wrapper or the header/footer div as they are set to 1000px wide. The color bars should go across the entire screen.

Answer 1

You should:

• Ensure you have html, body { margin: 0; padding: 0 }
• Add the #headerBar and #footerBar outside of your "content wrapper".

Something like this: http://jsfiddle.net/GDDA5/

html, body {
    margin: 0;
    padding: 0
}
#contentWrapper {
    width: 300px;
    margin: 0 auto;
    background: #ccc;
    height: 100px
}
#headerBar {
    height: 40px;
    background: blue
}
#footerBar {
    height: 40px;
    background: red
}

Or if you would like the bars to stick to the viewport and be behind content: http://jsfiddle.net/GDDA5/3/