배경 이미지 창에 맞게 늘리는 방법

배경 이미지 창에 맞게 늘리는 방법입니다.

보통 배경이미지를 설정할 때,  body 태그에 속성으로 설정하는데, 배경이미지를 브라우저 사이즈에 맞추려면 다음 코드를 이용해야 합니다.

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

출처 페이지에 연관된 코드들이 많이 올려져 있으니, 선호도에 따라서 이용하시면 편할 듯 합니다.

출처:

http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only