CSS : 배경 이미지를 화면의 너비와 높이를 100 % 늘이십니까?

CSS : 배경 이미지를 화면의 너비와 높이를 100 % 늘이십니까?

---

myImage.jpg라는 이미지가 있습니다. 이것은 내 CSS입니다.

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

어떤 이유로이 작업을 수행하면 myImage의 너비가 전체 화면에 걸쳐 늘어나지 만 높이는 페이지에있는 다른 모든 항목의 높이까지만 늘어납니다. 그래서 내가 많은 것을 넣으면

<br>

내 HTML 페이지에서 높이가 증가합니다. 내 HTML 페이지가

<div id='header'>
    <br>
</div>

배경 이미지의 높이는 1의 높이가됩니다.

<br>

사용자가 웹 페이지를 보는 데 사용하는 화면의 배경 이미지 높이를 100 %로 만들려면 어떻게해야합니까?

---

높이를 설정해야 html합니다.100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

---

background-size: cover;배경이 비율을 잃지 않게하려면 권장 합니다. JS Fiddle

html { 
  background: url(image/path) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

출처 : http://css-tricks.com/perfect-full-page-background-image/

---

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

트릭을 할 것입니다.

기본적으로 html과 body도 보유한 콘텐츠만큼만 크지 만 창의 너비 / 높이보다 크지 않습니다. 이것은 종종 아주 이상한 결과로 이어질 수 있습니다.

http://css-tricks.com/perfect-full-page-background-image/ 를 읽을 수도 있습니다 .

매우 훌륭하고 확장 가능한 전체 배경 이미지를 얻을 수있는 몇 가지 좋은 방법이 있습니다.

---

vh 단위는 브라우저 창이라고하는 뷰포트의 배경을 채우는 데 사용할 수 있습니다. (height:100vh;)

html{
    height:100%;
    }
.body {
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100vh;     
}

참조 URL : https://stackoverflow.com/questions/22887548/css-stretching-background-image-to-100-width-and-height-of-screen