Untitled

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/mootools-core-1.4.4.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
body {
    background: url('http://aux.iconpedia.net/uploads/1076620058994777287.png') no-repeat top right #b0c4de;
}

* {
  margin: 0;
  padding: 0;
}

#box {
  font: 20px Georgia;
  border: 2px  groove gray;
  border-radius: 6px;
  text-transform:  capitalize;
  color: white;
  text-align: center;
  margin: 40px 150px;
  width: 500px;
  height: 400px;
  background: #bfbfbf;
  text-height: 200px;
  overflow: hidden;
}

#l {
    height: 24px;
}
  </style>

</head>
<body>
<div id="box">
<script>
var x = ['red', 'green', 'yellow', 'purple', 'orange', 'violet', 'pink', 'royalblue', 'blue'];

i = 0;
while(++i < 20)
    document.write("<div style='background: "+x[Math.round(Math.random()*x.length)]+"' id='l'></div>");
</script>
</div>
</body>
</html>