Resposive background image

Question

Каков наилучший способ сделать фоновое изображение отзывчивым? Я хотел бы, чтобы класс .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;  
}