Фон блока не растягивается вместе с контентом самого блока. Помогите

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  list-style: none; 
  text-decoration: none; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
.brya { 
  width: 100%; 
  height: 100%; 
  border: 1px solid red; 
  background: url(http://i39.tinypic.com/28i18k6.jpg); 
  background-size: 100% 100%; 
} 
 
#brya1, 
#brya2 { 
  width: 50%; 
  height: 100%; 
  float: left; 
  padding: 14px; 
} 
 
.clear, 
.clear:after, 
.clear:before { 
  content: ""; 
  display: block; 
  clear: both; 
}

<div class="brya"> 
 
  <div id="brya1"> 
    <h2>Фердинанд</h2> 
  </div> 
 
  <div id="brya2"> 
    <li>год</li> 
    <li>год</li> 
    <li>год</li> 
    <li>год</li> 
    <li>год</li> 
    <li>год</li> 
    <li>год</li> 
  </div> 
</div>