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

I created a <div> first thing in the <body> to draw a top line at the top of the page:

<body>
    <div class="bordertop"></div>
    .....
</body>

and the style:

body {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    margin:0;
}
.bordertop {
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
}

However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?

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

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

Related

Recent Posts