background-image doesn't appear if is empty?

Answer 1

If it is the only div element in the body use the following style to to make it occupy the full-width.

.bordertop  {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-image: 
   url('../images/top_border.png');
}

Answer 2

I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.

left {
    width: 800px;
    height: auto;
    min-height: 100%;
    position: relative;
    background-image: url("../img/loginpic.jpg");
    background-size: cover;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: crimson;
}

Answer 3

As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.

On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.

Answer 4

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 */
}

Answer 5

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

Answer 6

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;
}