body {
background-image: url(images/1.jpg);
background-size:cover; /*Масштабирует изображение с сохранением пропорций так, 
                       чтобы его ширина или высота равнялась ширине или высоте блока*/
}
#block1 {
  width: 70%;
  height:50%;
} 
.tlq, .blq {width:32px;height:32px;float:left;}
.tbl, .bbl {margin: 0 32px;height:32px; background-color: blue;}
.trq, .brq {width:32px;height:32px;float:right;}
.ml {width:100%;  background-color: blue;}
.tlq {background: transparent url('./images/q11.png')  0px 0px no-repeat;}
.trq {background: transparent url('./images/q11.png')  -32px 0px no-repeat; }
.brq {background: transparent url('./images/q11.png')  -32px -32px no-repeat; }
.blq {background: transparent url('./images/q11.png')   0px -32px no-repeat; }

<div id="block1">
      <div class="tl">
        <div class="trq">
            </div>
        <div class="tlq">
            </div>
        <div class="tbl">
            </div>
      </div> 
      <div class="ml">
          some text some text some text some text some text some text some text some text 
          some text some text some text some text some text some text some text some text 
          some text some text some text some text some text some text some text some text 
      </div> 
      <div class="bl">
        <div class="brq">
            </div>
        <div class="blq">
            </div>
        <div class="bbl">
            </div>
      </div> 
  </div>