Repeat background image around centered header - html

Question

I have a header with a fixed height and width centered on my page. From each edge of the header image I have taken small 1 px images that I wish to repeat on the remeining space of that width.
Anyway, my problem is that I can not get the small images to repeat around the header. I started by trying to repeat the background image right of the header, but instead that background jumps down to the next "row" and repeats itself there. When I added the left header bg image that one repeated on the entire "row" and the right header image goes under it.
Edit-
Here it is at jsfiddle. hope it helps you understand my problem.
http://jsfiddle.net/kEdGb/
Now here's the html:
<div id="HeaderContainer">
<div id="HeaderLeft"></div>
<div id="Header">
<div id="Menu">
<ul class="tab">
<li>Link</li>
</ul>
</div>
</div>
<div id="HeaderRight"></div>
</div>
And the css:
#HeaderContainer {
width: 100%;
}
#Header
{
background-image: url(images/header_image.png);
background-repeat: no-repeat;
background-color: #707173;
height: 210px;
width: 990px;
max-width: 990px;
margin: 0px auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
position: relative;
border-top-style: solid;
border-top-color: #707173;
border-top-width: 1px;
border-left-style: solid;
border-left-color: #707173;
border-left-width: 1px;
border-right-style: solid;
border-right-color: #707173;
border-right-width: 1px;
}
#HeaderLeft {
background-image: url(images/headerLeft.png);
background-repeat: repeat-x;
position: absolute;
height: 210px;
width: 100%;
}
#HeaderRight {
background-image: url(images/headerRight.png);
background-repeat: repeat-x;
position: absolute;
height: 210px;
width: 100%;
}
#Menu {
max-width: 95%;
position: absolute;
bottom: 0px;
left: 5%;
}
Doesnt work in any browser. What am I missing? :)

Answer 1

You don't need extra div's for left and right. You can simply apply the background tile to the #HeaderContainer, and the overlapping #Header will cover it with its background =)
And for different images left and right, you just need to overlap the background from one side - say left, with another div.
Here is a DEMO.

Answer 2

Have you tried to wrap the image URLs inside some quotation marks? Like background-image: url('images/headerLeft.png');

Answer 3

What I understood from your question is, you want to implement background-image on header corners only (similar to border-image).
If so,
you can simply following steps:
take element: parent and child
Repeat background image in parent element and given padding according to image you want to visible.
Assign different background color or image for inner element.
In this way background image of parent element works as border-image of header
Cheers,
Vikram

Answer 4

Just for curiosity sake, I have worked on your issue.
Here is the fiddle.
The HTML:
<div id="HeaderContainer">
<div id="HeaderLeft"> </div>
<div id="HeaderRight"> </div>
<div id="header">
<div id="Menu">
<ul class="tab">
<li>Link</li>
</ul>
</div>
</div>
</div>
The CSS:
#HeaderContainer {width: 100%; position:relative;}
#HeaderLeft {background: url("images/headerLeft.png") repeat-x top left; height: 210px; position:absolute; top:0%; left:0%; width:50%;}
#header {background: url("images/header_image.png") no-repeat 0 0 #707173; height: 210px; width: 990px; margin:0 auto; position:relative;}
#HeaderRight {background: url("images/headerRight.png") repeat-x top right; height: 210px; position:absolute; top:0%; right:0%; width:50%;}
I have taken a reference for some points from #Martin Turjak code.