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;
}
Pregunta
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.
Solución
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;
}
Otros consejos
Try adding a Div with a z-index. This div can you give it's own css style
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%.
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;
}