css 백그라운드 이미지 전체 화면

가장 간단하면서도 훌륭한 방법 : CSS3를 이용한 방법

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

 

지원브라우저

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+ (Opera 9.5 supported background-size but not the keywords)

Firefox 3.6+

 

애석하게도 IE9 밑으로는 반쪽짜리 코딩이다.

해보면 알겠지만, 배경이미지 사이즈가 100% 되긴하는데, 브라우저 창의 크기에 따라 이미지가 작아지거나 커지지 않는다. 웹표준에 맞춘 브라우저들은 모두 잘 돌아간다.

CSS를 이용하거나  jQuery 를 이용한 더 진화된 방법을 소개하는 곳이 있으니 다른 방법을 보시려면 아래 링크를 보시면 됩니다.

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

출처 : http://juotte.net/?p=5765