Scale div to fit page - html

Question

I'm very new to CSS and HTML and I'm trying to create a CSS version of this:
http://i.stack.imgur.com/JNgUb.jpg
I've successfully created 4 divs with 4 different colors but this is my result:
http://i.imgur.com/ihYblSv.png
How can I scale the div to fit the entire page?
my code is:
body{
background-color: #eae1c8;
}
#bg {
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transfrom:rotate(30deg);
}
#blue {
height: 25%;
background-color: #9dd2b5;
}
#green {
height: 25%;
background-color: #6aa427;
}
#yellow {
height: 25%;
background-color: #f0b747;
}
#orange {
height: 25%;
background-color: #de5b1e;
}

Answer 1

It fit the entire page before you rotated it.
If you want it to take up the entire page, set page body { overflow: hidden; } and then play with the sizes of your divs to fill the space. Set #bg { height: 160%; } and each color to 40% and see how that works.

Answer 2

Here is a Javascript Function I created with a little CSS. This is great for auto-sizing a page to fit without changing the ratio. This will resize the page on startup and when the window is resized. You can change body to the element that you want full page, and you can change the function to use a click event if you want it resized only when it is clicked. Just remove the call for the function and change the $(window).resize to $('#elementid').click
CSS:
body{
height:620px;
width:1023px;
position:absolute;
box-sizing:border-box;
transform-origin: 0 0;
-moz-transform-origin:0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
JavaScript:
var ratio;
var left;
resize();
$(window).resize(function () {resize();});
function resize()
{
ratio = window.innerHeight / $('body').innerHeight();
if (window.innerWidth / $('body').innerWidth() < ratio) {
ratio = window.innerWidth / $('body').innerWidth();
}
ratio -= .04;
$('body').css('-ms-zoom', ratio);
$('body').css('-moz-transform', 'scale(' + ratio + ')');
$('body').css('-o-transform', 'scale(' + ratio + ')');
$('body').css('-webkit-transform', 'scale(' + ratio + ')');
$('body').css('transform', 'scale(' + ratio + ')');
left = ($(window).innerWidth() - $('body').outerWidth() * ratio) / 2;
$('body').css('left', left);
}