CSS 배경 이미지 - 고정 크기 div에 맞게 축소

다음 코드는 https://jsfiddle.net/ncrcfduz이고 배경 이미지는 https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg입니다. div에 맞게 배경 이미지의 크기를 조정해야합니다. 이미지의 중심에있는 대부분의 내용을 표시하는 것이 좋습니다. 다음 코드는 이미지의 왼쪽 상단 만 보여줍니다.CSS 배경 이미지 - 고정 크기 div에 맞게 축소

.container { 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 150px; 
 
    width: 300px; 
 
}

<div class="container"> 
 
</div>

출처

2016-09-18 user1187968

당신은 "중심"내용으로 무엇을 의미합니까? –

background-size :를 대신 사용하십시오. – kinakuta

이것은 관련성이 있습니다 : http://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im 'background-attachment : fixed' 이미지는 요소가 포함되지 않은 뷰포트입니다. –

당신은 background-size: contain (see the css-tricks' entry)을 찾고,하지 cover. 예를 사용하려면 background-attachment: fixed을 삭제해야합니다. div에 배경의 중심을 맞추려면 background-position: center을 사용하십시오.

.container{ 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: contain; 
 
    
 
    height: 150px; 
 
    width: 300px; 
 
}

<div class="container"> 
 
</div>

출처

2016-09-18 16:09:15 henry

당신은 당신의 "배경"명령에 "센터"에 의해 "고정"교체해야합니다. 그와 마찬가지로

: 여기

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;

JSFiddle : https://jsfiddle.net/ncrcfduz/2/

출처

2016-09-18 16:06:16 AymericM

은 사용한다 :

.container{ 
    background-size: 100%; 
}

출처

2016-09-18 16:06:24 Anonoymous

CSS 배경 이미지 - 고정 크기 div에 맞게 축소

답변

관련 문제