배경이미지를 반복하지 않고 한개만 풀화면으로 띄워주면서, 브라우저의 사이즈에 따라서 흰여백이 생기지 않게 꽉차도록 자동으로 배경이미지를 줄여주고 늘여주는 것을 본적이 있었는데, 그것을 적용하려고 이것저것 찾아보다가 해외 사이트에서 잘 설명해놓은 방법을 발견했다.

예를 들어 아래 사이트처럼 되는 것이다.
아래 버튼을 클릭하면 볼수 있다.

http://ringvemedia.com/

 

 

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

Related Articles

2 comments

성 슬기 2013-08-02 - 8:31 pm

안녕하세요. 정말 찾던 정본데 감사합니다 ㅜㅜ 그런데 죄송하지만 제가 실력이 부족해서 그런데 저 box태그는 어디다 붙여놔야하는지 알려주실 수 있으신가요?
실제로 어디에 어떻게 적용시켜야 되는지…알려주시면 더 감사하겠습니다..ㅜㅜ

juotte 2013-08-12 - 1:38 pm

아.. 안녕하세요. 제가 잠시 해외에 다녀오느라 댓글을 이제야 봤어요. 위에 있던 box태그는 잘못된 코드가 나타난것입니다. 지금 제가 수정해놨는데요. 외부CSS 파일이나 HEAD부분에 스타일시트 정의하는 곳에 위의 소스를 넣어두시면 됩니다.

하지만 위에 언급한데로 낮은 익스플로러 버전에서는 CSS3가 작동을 안하기 때문에 반영이 안되실것입니다.

그래서, 밑에 링크를 걸어두었는데요. 거기 보시면 낮은 버전의 CSS에서도 동장하는 다른 몇가지 방법이 있습니다. 영어로 되어 있긴한데, 소스를 그대로 적용해보시면 될듯합니다.^^

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

Comments are closed.