CSS Background Not Showing - html

Question

Hey guy's I've been trying out something different with my CSS backgrounds in order to make a header line. I want to have it set up so the line is made up of 5 equally sized portions with each portion being a different color. Here is an example
I have the code set up but I can't get the background to show up properly I have my code down below. Any help would be appreciated, thanks!
HTML:
<div id="div-line">
<div class="blockOne"></div>
<div class="blockTwo"></div>
<div class="blockThree"></div>
<div class="blockFour"></div>
<div class="blockFive"></div>
</div>
CSS:
#div-line {
width:100%;
height:5px;
}
.blockOne {
width:20%;
background-image:url(../images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(../images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(../images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(../images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(../images/BlueBlock.png);
background-repeat:repeat-x;
}

Answer 1

You need to float the DIV elements and add height.
Working DEMO
Added a generic CSS class block in HTML:
<div id="div-line">
<div class="block blockOne"></div>
<div class="block blockTwo"></div>
<div class="block blockThree"></div>
<div class="block blockFour"></div>
<div class="block blockFive"></div>
</div>
and tweaked CSS:
#div-line {
width:100%;
height:5px;
}
.block {
height:100%;
float:left;
width:20%;
}
.blockOne {
background-color:red;
}
.blockTwo {
background-color:black;
}
.blockThree {
background-color:red;
}
.blockFour {
background-color:black;
}
.blockFive {
background-color:red;
}

Answer 2

You could achieve this by using background for color. And the reason why your divs are not showing up is because you need to give them a height and also you need to float them to the left.
#div-line div {
float:left;
}
#div-line {
width:100%;
height:5px;
}
.blockOne {
width:20%;
height:100%;
background:#00FFFF;
}
.blockTwo {
width:20%;
height:100%;
background:#FFA500;
}
.blockThree {
width:20%;
height:100%;
background:#00FFFF;
}
.blockFour {
width:20%;
height:100%;
background:#FFA500;
}
.blockFive {
width:20%;
height:100%;
background:#00FFFF;
}
Working sample here.

Answer 3

Why do you want to use background images where you can use background-color ?
You can offload the server atleast if you use background color.
.blockN {
width: 20%;
background-color: #0094ff; // or your color
}

Answer 4

Do something like this
.blockOne {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(images/BlueBlock.png);
background-repeat:repeat-x;
}
OR
.blockOne {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(./images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(./images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(./images/BlueBlock.png);
background-repeat:repeat-x;
}
The thing you are trying to do ie, background-image:url(images/orangeBlock.png) is used in linux.