responsive background image moves to the left after certain size - css

Question

I have a background image that i've set to a header element in HTML. The image seems to respond until it hits a ceratin width, then it begins to move left off the page. Can someone help me understand what is going on, i can't seem to get it working no matter what i've tried :(
Below is my code, here is the fiddle http://jsfiddle.net/n7tBp/. If you resize the browser window to under 900px it starts to move the google image to the left
.header_area{
padding-top: 10%; /* slope */
height: 200px; /* start height */
background-image: url("http://musically.com/wp-content/uploads/2013/10/Google.jpg");
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
}
.header_area h1{
color:#e5e6d6;
font-size:34px;
display: inline-block;
-webkit-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
transform: skewX(-15deg);
}
.header_area h2{
color:#e5e6d6;
font-size:22px;
display: block;
-webkit-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
transform: skewX(-15deg);
}
.header_area figcaption{
margin-left:30px;
margin-top: -20px;
}

Answer 1

There are there options you can use for this image resize .
cover:-Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
-webkit-background-size: cover;
background-size: cover;
DEMO http://jsfiddle.net/n7tBp/ (current one)
contain:-Scale the image to the largest size such that both its width and its height can fit inside the content area
-webkit-background-size: contain;
background-size: contain;
DEMO http://jsfiddle.net/n7tBp/4/
percentage:-Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
-webkit-background-size: 100%;
background-size: 100%;
Demo http://jsfiddle.net/n7tBp/5/