background-size：调整浏览器大小时相对于内容的覆盖范围

Question

我是响应式设计和引导程序的新手。我的网站模板背景是一个圈子里面有很多东西，所以我不能用css绘制它，它必须是背景图像。 现在，我需要在调整窗口大小时将文本，操纵杆和背景图像组合在一起：http://i.imgur.com/9ABOTn3.jpg
我怎么能这样做？

的 HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="row row1">
        <div class="col-xs-9">
          <div class="square"></div>
          <hr class="path">
        </div>
        <div class="col-xs-3">
          <h3>Text1</h3>
        </div>
      </div><!--end row-->
      <div class="row row2">
        <div class="col-xs-2">
          <h3>Text2</h3>
        </div>
        <div class="col-xs-10">
          <div class="square"></div>
          <hr class="path">
        </div>
      </div><!--end row-->
      <div class="row row3">
        <div class="col-xs-9">
          <div class="square"></div>
          <hr class="path">
        </div>
        <div class="col-xs-3">
          <h3>Text3</h3>
        </div>
      </div><!--end row-->
    </div>
  </div>
</div>

CSS

body.issue {
  background: url("http://i.imgur.com/IFo4wAt.jpg") no-repeat center center fixed;
  background-size: cover;
  color: #ccc;
}
body.issue h3 {
  font-size: 3em;
  text-transform: uppercase;
  position: absolute;
  margin: 0;
}
.circle {
  width: 650px !important;
  height: 650px;
  border-radius: 325px;
  -webkit-border-radius: 325px;
  -moz-border-radius: 325px;
  position: relative;
  border: 1px solid #ff0;
  margin: 0 auto;
}
.square {
  width: 24px;
  height: 24px;
  background-color: #eee;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  position: absolute;
}
.path {
  width: 150px;
  position: absolute;
  margin: 0;
}
.row1, .row2 {height: 35vh}
.row3 {height: 30vh}
.row1 .path {
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  transform: rotate(330deg);
  right: -30px;
  top: 158px;
}
.row1 .square {
  right: 96px;
  top: 182px;
}
.row1 h3 {
  top: 90px;
  left: 30px;
}
.row2 .path {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
  left: 12px;
  top: 48px;
}
.row2 .square {
  left: 145px;
  top: 50px;
}
.row2 h3 {top: 5px;right: 0}
.row3 .path {
  -webkit-transform: rotate(35deg);
  -moz-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  transform: rotate(35deg);
  right: -55px;
  top: 55px;
}
.row3 .square {
  right: 70px;
  top: 0;
}
.row3 h3 {
  left: 55px;
  top: 80px;
}

这是我的代码： http://codepen.io/anon/pen/iqFyd
谢谢，抱歉我的英语不好。