How can I make a CSS background that is all white with a 100px blue bar at the very top of the page?

Question

I see a lot of code dealing with percentages, but what if I just wanted a 100px bar in the top? I am only able to edit the CSS of this page, so can I do it without any use of HTML?

Answer 1

Use :before pseudo-element:

body:before {
    content: " ";
    display:block;
    width:100%;
    height:100px;
    background:blue;
}

With this you can change some properties and have this results:

Content Above the Bar

body {
  color:white;
  margin:0;
}
body:before {
    content: " ";
    display:block;
    position:absolute;
    top:0;
    width:100%;
    height:100px;
    background:blue;
    z-index:-1;
}

<h1>The content will be above the bar</h1>

Content Under the Bar

body {
  margin:0;
}
body:before {
    content: " ";
    display:block;
    width:100%;
    height:100px;
    background:blue;
}

<h1>The content will be under the bar</h1>

Answer 2

You can use a sized, laterally-repeating, linear-gradient:

html {
    background: white linear-gradient( 0, blue, blue ) repeat-x;
    background-size: 100px 100px;
}

Fiddle: http://jsfiddle.net/r5a2uabw/4/