Css 响应背景图像在达到一定大小后向左移动

我有一个背景图像，我已经设置为HTML中的头元素。图像似乎会做出反应，直到它达到ceratin宽度，然后开始离开页面向左移动。有人能帮我理解发生了什么事吗？不管我怎么做，我似乎都无法让它工作：(

下面是我的代码，这是提琴。如果你把浏览器窗口的大小调整到900px以下，它就会开始将谷歌图像向左移动

.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;
}

---

您可以使用以下选项调整此图像的大小

覆盖：缩放背景图像，使其尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不到

  -webkit-background-size: cover;
          background-size: cover;

演示（当前一个）

包含：-将图像缩放到最大大小，使其宽度和高度都能容纳在内容区域内

  -webkit-background-size: contain;
          background-size: contain;

演示

百分比：-以父元素的百分比设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个值设置为“自动”

---

演示

谢谢！它真的很有用，我还在学习：（.我该如何减少与图像相关的标题区域的大小，我希望图像包含完整区域，而不是保留高度，但是如果删除最小高度，似乎会出错。

  -webkit-background-size: 100%;
          background-size: 100%;