Stackoverflow - CSS background Image -> Using an image
http://stackoverflow.com/q/8866061/918414
HTML
<script>
/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
var headerUri = 'http://stackoverflow.com/q/8866061/918414',
headerCaption = 'CSS background Image -> Using an image';
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'color: white;'
+ 'display: block;'
+ 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
+ 'height: 26px;'
+ 'left: 0px;'
+ 'opacity: 1;'
+ 'overflow: hidden;'
+ 'padding: 2px 8px;'
+ 'position: fixed;'
+ 'right: 0px;'
+ 'text-decoration: none;'
+ 'text-overflow: ellipsis;'
+ 'text-shadow: -1px -1px black;'
+ 'top: 0px;'
+ 'white-space: nowrap;'
+ '"><img '
+ 'style="'
+ 'display: block;'
+ 'float: left;'
+ 'margin-right: 8px;" '
+ 'src="http://thinkingstiff.com/images/stackoverflow.png" />'
+ headerCaption
+ '</a>'
);
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="http://thinkingstiff.com" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+...
CSS
html{
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 50% 100%;
height:100%;
width:100%;
}