컨테이너 내용이 작 으면 배경 이미지 표시 (응답)

Question

브러시 획을 단추 배경으로 사용하는 반응 형 사이트 (기초 3 사용)에서 작업하고 있습니다. 나는 1) 반응 형 디자인의 나머지 부분과 함께 이미지를 얻는 데 어려움을 겪고있다. 2) 컨테이너 div가 얼마나 큰지 상관없이 전체 크기의 배경 이미지를 보여주고있다.

몇 스크린 샷 :

브라우저가 가득

폭 - http://www.screencast.com/t/3Lu86fhnsZkk 브라우저가 폭 - http://www.screencast.com/t/3Lu86fhnsZkk

에서 확장 할 때

(나는 새로운 사용자가 이미지를 게시 할 수 없습니다 해요)

CSS :

h4.reserve{ 
background: url(../images/reserve_spot_bkg.png) no-repeat; 
width: 290px; 
height: 63px; 
padding-top: 20px; 
margin: 0 0 0 -10px;} 

배경을 가지고있는 더 좋은 방법이 무엇 이미지는 1) 내용이 작아도 풀 사이즈로 보여주고 2) 반응이 좋습니다.

Answer 1

은 컨테이너에 배경 적합을 위해 그것은 설정에 속한다는 컨테이너 요소의 크기를 조정하기 때문에 컨테이너 요소가 반응 할 때 이미지 크기를 조정합니다 background-size

h4.reserve { 
background: url(../images/reserve_spot_bkg.png) no-repeat; 
background-size: cover; 
width: 60%; 
min-width: 100px; 
} 

http://www.w3schools.com/cssref/css3_pr_background-size.asp

cover에 너비/높이에 백분율 값을 사용하거나 미디어 쿼리를 사용합니다. 최소 너비와 최대 너비를 사용하여 요소가 너무 작거나 넓어지지 않도록합니다.