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
Post a Comment