Skinning the Prototype

After adding the functionality, I went onto skinning the design to give it the look I was going for. One of the biggest challenges in the process was getting the 3 backgrounds to fill the width of the site and to have them positioned correctly.

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame()
{
    var h = $(window).height();
    var w = $(window).width();
   	$('#bg-one').css('height', h);
  	$('#bg-two').css('height', h);
  	$('#bg-three').css('height', h);
	$('#bg-one').css('width', w);
  	$('#bg-two').css('width', w);
  	$('#bg-three').css('width', w);
}

To make the large image scale the width and height of the page, I used the CSS “cover” property for background-size

#bg-one{
	background: url(../images/image.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:fixed;
	z-index:1;
	width:100%;
	opacity: 0.3;
}

Using typefaces from FontSquirrel, the look is complete.