css - 応答性のある背景画像

Question

背景画像をレスポンシブにするための最良の方法は何ですか？class .containerでウィンドウのサイズの16％を拡張してほしい。また、テキストをオーバーレイして、垂直方向/水平方向の中央に配置する必要があります。

例： http ：//codepen.io/zerostyle/pen/avHqG

<div class="container">
    <div class="cat"><p>CATS ARE AWESOME!</p></div>
</div>

.cat {
  background: url("http://placekitten.com/300/300") no-repeat; 
  position: absolute; 
  width: 300px; 
  height: 300px;  
  display: table; 
}

.cat p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  color:#FFF;
  font-size:24px;
}

Answer 1

これを試してくださいhttp://jsfiddle.net/TM3WF/1/

.cat {
    background: url("http://placekitten.com/300/300") no-repeat; 
  position: absolute; 
  width:100%; 
  height: 100%;  
  display: table; 
  background-size:cover;
}

.cat p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 

  color:black;
  font-size:24px;    
}