CodePen

HTML

            
              <!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="rollover.css" media="screen">

</head>

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>

<div id="preload"><img src="http://www.kaeuferportal.de/images/loading.gif"/></div>

<script type="text/javascript">$.backstretch("http://img84.imageshack.us/img84/7128/img6413w.jpg", {speed: 400})</script>

<script>$(window).on("backstretch.show", function () {
  $("#preload").hide().fadeOut('slow');
});</script>

</body>
</html>
            
          
!

CSS

            
              body{
	background-color: #333;
}

#preload {
background: #FFF;
color: #dbdbdb;
left: 50%;
top: 50%;
margin-left: -45px;
margin-top: -45px;
padding: 5px;
position: fixed;
text-align: center;
width: 80px;
z-index: 100;
-webkit-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................