background-image doesn't appear if <div> is empty?

Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.

.bordertop 
{
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
    height: 100px;
    width: 100%; /* may not be necessary */
}

You might need to set the css width and height of your <div> element to whatever size you want

.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;
    width: 200px;
    height: 100px;
}

Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.

You could also give it padding-top:1px

Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.

See demo