배경 이미지 채우기 배경 만들기

이것은 일반적인 질문 인 것처럼 보이지만 기존 답변은 저에게 효과가없는 것 같습니다. 나는 그것이 넓은 것보다 훨씬 더 큰 배경 이미지를 가지고있다. 나는 높이가 body의 100 %가되고 싶습니다.배경 이미지 채우기 배경 만들기

body, html { 
    height: 100%; 
    min-height: 100%; 
} 

body { 
    background:url("NewLogo.png") no-repeat center center; 
    background-size: 100% auto; 
}

가 나는 또한 background-size: cover;을 변경 시도했지만이 또한 단지 큰 이미지를 만들지 만 상단과 하단을 차단 : 지금까지 나는 노력했다.

출처

2017-11-04 boropu

contain을 사용하십시오. 이는 전체 이미지가 컨테이너에 표시되는 것을 보장합니다, 아무것도 차단되지 않습니다 :

body { 
    background:url("NewLogo.png") no-repeat center center; 
    background-size: contain; 
}

출처

2017-11-04 23:27:37 stybl

유의하시기 바랍니다 당신은 커버하고 단지 대형하지 않고 (그것의 자신의 높이를 가지고있다 배경 이미지를 갖고 싶어 , 브라우저의 너비는 넓지 만 위에있는 & 하단을 잃어 버림), 배경 이미지에 적절한 높이를 부여 할 수 있습니다.

body { 
 
     margin: 0; 
 
    } 
 

 
#image { 
 
    background-image: url(https://images.unsplash.com/photo-1504387103978-e4ee71416c38?auto=format&fit=crop&w=2134&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D); 
 
    background-repeat: no-repeat; 
 
    height: 293vh; 
 
    background-size: cover; 
 
}

<div id="image"> 
 
</div>

당신은 당신의 배경 이미지 커버를 만들고 싶어, 또는 당신이 될 것입니다, 당신의 이미지를 다양한 브라우저에 맞지 않을 것이지만 그것 (포함 할 것인지가 진짜에 그렇지 않은 경우

을 높이)를 보려면 다음 링크를 방문하십시오. codepen>background-size>CSS-Tricks

출처

2017-11-05 09:03:02

배경 이미지 채우기 배경 만들기

답변

관련 문제