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

Answer 2

Try adding a Div with a z-index. This div can you give it's own css style

Answer 3

Simply placed a div with id or class..

<div id="topbar"></div>

and placed css code in stylesheet

#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc;   }

this not only float you div as a top bar but also extend to you browser 100%.

Answer 4

You can use linear-gradient() for the bar color and use background-size to limit its height:

body {
  background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}