Resposive background image

Question

배경 이미지를 반응 적으로 만드는 가장 좋은 방법은 무엇입니까? 클래스. 컨테이너가 창 크기의 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;  
}