CSS 2 div repeat and one div in middle - html

Question

I'm working with my project.
I want 3 divs to be in one line and fixed position..
First div is repeated x
2nd div is in middle
Last div is repeated x.
I want my output to be like this:
http://jsfiddle.net/9o22xe2x/
<div class="header-fixed">
<div class="header-bg1"></div>
<div class="header-logo"></div>
<div class="header-bg2"></div>
</div>
CSS
.header-fixed{
position: fixed;
top: 0;
width: 100%;
}
.header-bg1{
background:url('images/header-bg1.png') repeat-x;
height: 88px;
left: 469px;
display: block;
}
.header-bg2{
background:url('images/header-bg2.png') repeat-x;
height: 128px;
left: 469px;
display: block;
}
.header-logo{
background:url('images/header-logo.png') no-repeat;
width: 469px;
height: 128px;
}

Answer 1

add below to your css:
.header-fixed div {
float: left;
clear: none;
}
then in the HTML call it as:
<div class="header-fixed">
<div class="header-bg1"></div>
<div class="header-logo"></div>
<div class="header-bg2"></div>
</div>
try and see !

Answer 2

Using display: inline-block you can do:
Add that style to child divs:
.header-fixed>div{
display:inline-block;
vertical-align: top;
}
Remove whitespace between those divs. Note the commented HTML in the fiddle.
add some width to the first and third child div like:
.header-bg1, .header-bg2{
width: calc((100% - 469px)/2);
/* 100% of parent width minus the logo width divided */
/* with 2 will put the same width for the first and third child */
/* and center the logo */
}
caniuse CSS calc()
JSFiddle
Note: I've added margin: 0 to the body to remove it's default margin.

Answer 3

Here is a simple implementation with 2 lines of HTML and a small amount of simple CSS:
First background is a background image on the body
Logo is an image in the header.
Second background is on a pseudo element of the header which is positioned with position: absolute and left: (logo width) / top: 0;.
Tested and working Chrome, Firefox and IE 9 + (IE 8 and even IE 6 and 7 is possible with modification)
Example
Note: The default margin on the body has been removed to prevent a gap.
body {
background: #D3BC00 url('http://i.imgur.com/tZR9xWD.png') repeat-x;
margin: 0;
}
header {
position: relative;
background: #D3BC00;
width: 500px;
/* smallest size is logo width */
margin: 0 auto;
}
header:before {
content: '';
display: block;
height: 100%;
background: #D3BC00 url('http://i.imgur.com/GkQQ4PF.png') repeat-x;
position: absolute;
width: 100%;
top: 0;
left: 469px;
/* logo width */
}
<header>
<img class="logo" src="http://i.imgur.com/m3EiiKN.png" />
</header>