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

Question

Very simple question!

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

How can I do that?

Bars should be 100% of the width - so this is not done through the shell of the content or div of the header / footer, as they are set to a width of 1000 pixels. Color bars should intersect across the screen.

Answer 1

You should:

• Make sure you have html, body { margin: 0; padding: 0 } html, body { margin: 0; padding: 0 }
• Add #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 want the bars to adhere to the viewport and be behind the content: http://jsfiddle.net/GDDA5/3/

Answer 2

I'm late for parity, but use css3!

 #selector:after { content: '|' } 

Answer 3

You should take the footer div from the content div wrapper, then it should automatically take body width dimensions, giving you the effect you are looking for.