html - How would I add a dotted overlay to my background? -


what http://mountaintheme.com/themeforest/mountain/home.html , i'm not sure @ how go this. i've tried methods utilizing css, failed miserably. seems simple fix i'd imagine...

this current code,

<!doctype html> <html> <head> <meta charset="utf-8"> <title>sound off</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">   <style>     body {         background-color: rgb(255, 255, 255);         color: #000;     }      {         color: #fff;     }      a:hover {         color: #fff;     }      hr {         border-top-color: #fff;     }      .main {         opacity: 0.6;         max-width: 640px;         margin: 150px auto;         padding: 0px 15px;         height:2048px;     }      .page-header {         border-bottom: 3px #fff solid;     }      footer .accr {         text-align: right;     }      @media (max-width: 767px) {         .clearfix div {             width: 100%;         }          .rgb, .accr {             text-align: center !important;         }     }  </style>  </head> <body>   <div class="main"> <h1 class="page-header"></h1> <p style="font-family:'helvetica'"></p> </div>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script id="colorscroll" data-colors="255, 255, 255:255, 255, 204:204, 255, 255">  var colors = $("#colorscroll").data("colors"); var colors_array = colors.split(":"); var numcolors = colors_array.length;  var rgbs = []; for(var = 0; < numcolors; i++) {     rgbs[i] = [];     var c = colors_array[i].split(",");      rgbs[i][0] = c[0];     rgbs[i][1] = c[1];     rgbs[i][2] = c[2]; }  var drgbs = []; for(var = 0; < (numcolors - 1); i++) {     drgbs[i] = [];      drgbs[i][0] = rgbs[i][0] - rgbs[i+1][0];     drgbs[i][1] = rgbs[i][1] - rgbs[i+1][1];     drgbs[i][2] = rgbs[i][2] - rgbs[i+1][2]; }  $(window).scroll(function() {     var position = $(this).scrolltop();     var view = $(this).height();     var height = $(document).height();      var travel = height - view;     var percent = position / travel;     var level = math.floor(percent * (numcolors - 1));     var plevel = percent * (numcolors - 1);      var dlevel = math.floor(level);     if(math.floor(level) == (numcolors - 1)) {         dlevel = math.floor(level) - 1;     }      if(plevel > 1) {         plevel = plevel - dlevel;     }      var nred = (rgbs[dlevel][0] - math.round(drgbs[dlevel][0] * plevel));     var ngreen = (rgbs[dlevel][1] - math.round(drgbs[dlevel][1] * plevel));     var nblue = (rgbs[dlevel][2] - math.round(drgbs[dlevel][2] * plevel));      $(".rgb span").text(nred + ", " + ngreen + ", " + nblue);     $("body").css("background-color", "rgb(" + nred + "," + ngreen + "," + nblue + ")");  });  </script> </body> </html> 

this gif image can download through google crome.

you can download here. click here


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -