"background-positon : center"가 "background-attachement : scroll"과 작동하지 않습니다.

Question

본문에 배경이있는 레이아웃을 만들고 있습니다. 나는 그것을 수평과 수직으로 중심에 둘 필요가있다. 그 목적을 위해 나는 background-position : center를 사용한다.

background-image:url('address'); 
    background-repeat:no-repeat; 
    background-position:50% 50%; 

그러나 배경이 올바르게 세로로 배치되지 않았습니다. 화면 상단의 이미지 절반 만 볼 수 있습니다. 여기에서 확인하십시오 link to codepen.

해결책으로 다양한 크기와 배경 위치 50 % 50 %의 이미지를 사용하려고했습니다. 그런 다음 다른 배경 상대적 선택기를 두 번 확인하고 background-attachement를 추가하고 고정 값으로 스크롤되는 기본 값에서 이미지를 올바르게 가운데로 맞출 때 변경한다는 것을 알게되었습니다.

왜 이런 일이 일어 났는지 설명 할 수 있습니까? 기본이 body의 높이의 내용을 기반으로 0

, 그리고 배경 이미지를 설정하지 않는 한 당신의 body 높이를 준하지 않은 경우가 발생

Answer 1

. 여기

하나가 body에게 높이와 때를 줄 필요가있을 때 당신이 위치 div이, 때로는 다른 문제가 발생할 수 있습니다

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(http://placehold.it/200); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

을 할 필요가 방법을 보여주는 샘플입니다 하나의 옵션

#bkgdiv { 
 
    position: absolute; 
 
    left: 0; top: 0; right: 0; height: 100vh; 
 
    background-image: url(http://placehold.it/200); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

<div id="bkgdiv"></div>

당신이 background-attachment: scroll 및/또는 위치 div 년대를 사용해야 할 경우, 여기에서 스크롤 (과 fiddle demo 함께 재생) 행동

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(http://placehold.it/200); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-attachment: scroll; 
 
} 
 
#bkgdiv { 
 
    position: absolute; 
 
    left: 0; top: 0; right: 0; height: 100vh; 
 
    background-image: url(http://placehold.it/180/0f0); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
#bkgdivfixed { 
 
    position: fixed; 
 
    left: 0; top: 0; right: 0; height: 100vh; 
 
    background-image: url(http://placehold.it/160/ff0); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

<div id="bkgdiv"></div> 
 
<div id="bkgdivfixed"></div> 
 
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>

을 보여주는 샘플입니다/방법에 따라 그래서

,

Answer 2

신체에 배경을 부여하고 싶다면 정말 간단합니다.

는 처음에 당신은 지금 이미지가 중심이 될 것 같다 당신이 몸

body { 
    background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg); 
    background-position: center; 
    background-repeat: no-repeat; 
} 

좋아요에 배경 CSS를 준 다음으로해야 할 팅은

html, body { 
    margin: 0; 
    height: 100%; 
} 

몸과 HTML에 대한 CSS를 작성해야 (화면), 이제 백그라운드 크기 속성을 사용하여 크기를 조정할 수 있습니다.

background-size: cover; 

전체 화면을 가리는 이미지가 충분히 확대되었습니다.

background-size: contain; 

이미지가 화면의 높이 또는 너비 (작은 크기)까지 확대되었습니다.

는 고정 된 크기를 스택 조각을 사용하여 코드 인라인을 넣을 수있는 가장 큰 이유 중 하나는

background-size: Xpx Ypx;