가장 간단하면서도 훌륭한 방법 : 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/
'웹 퍼블리싱 > Css' 카테고리의 다른 글
css 아키텍쳐 구성하기 (0) | 2024.03.11 |
---|---|
CSS 구글웹폰트 사용하기 (0) | 2015.07.17 |
CSS에 대해 잘 알려져있지 않은 12가지 사실 (0) | 2015.07.16 |