How do I create horizontal bar on page background with CSS but no image?

Question

I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.

I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):

body {
  width:             100px;
  height:            100px;
  background-image:  url('data:image/png;base64,...');
  background-repeat: repeat-x;
  margin:            0px;
  padding:           0px;
}

But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.

Answer 1

You can just create a div and style it as you want:

HTML

<div class="bar"></div>

CSS

.bar {
    width:            100%;
    height:           71px;
    background:       #DDD;
    margin-top:       81px;
    padding:          0px;
}

Fiddle Demo