전체 디스플레이 화면을 가리지 않는 배경?

질문

지금은 절반 밖에되지 않아 전체 페이지를 세로로 덮는 배경에 문제가 있습니다. 이것이 제가 현재하고있는 일이며 왜 작동하지 않는지 잘 모르겠습니다.

<div class="bg">
  <div class="container">
    some more code here
  </div>
</div>

그리고 내 CSS에는 다음이 있습니다.

body, html {
 height: 100%;
}

.bg {
 background-image:url(myimage.png);
 background-height: 100%;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

나는 또한 이전 게시물에서 몇 가지 해결책을 시도했지만 아무 소용이 없습니다.

시간 내 주셔서 감사합니다.

답변1

bgclass에는 height값이 필요합니다. 그렇지 않으면이를 채우는 콘텐츠만큼만 키가됩니다.

또한 background-height 는 유효한 속성이 아닙니다.

body, html {
 height: 100%;
}

.bg {
 height: 100%;
 background-image:url(http://www.fillmurray.com/800/400);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

이미지를 이미지로 변경하면 잘 될 것입니다. 첨부 된 바이올린을 참조하십시오.

https://fiddle.jshell.net/krqvhymn/

containerclass에 height값을 제공 할 수도 있습니다. 무엇을 하려는지에 따라

답변2

불행히도 나는 의견을 말할 수 없으므로이 답변을 추가 도움으로 제공하고 있습니다 (귀하의 질문에 대한 답변은 아니지만).

이러한 배경 속성을 가져 와서 각각을 분리하는 대신 한 줄에 모두 배치 할 수 있습니다. 다음과 같이 표시됩니다.

.bg {
   height: 100%;
   background: url(myimage.png) no repeat cover center;
   }

 

 

 

 

출처 : https://stackoverflow.com/questions/48350526/background-not-covering-whole-display-screen