가장 간단하면서도 훌륭한 방법 : 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

+ Recent posts