전체 화면에 이미지나 배경을 고정시키는 일이 필요한 경우가 종종 있습니다. 관련하여 정보를 찾아 서술합니다.
목표
- 여백없이 화면에 꽉차게 배경에 이미지를 깔기
- 윈도우의 사이즈에 따라 이미지의 크기도 변경하기
- 이미지의 가로 세로 비율 유지
- 스크롤바 감추기
- 가능한한 크로스 브라우징
- 마치 플래시 효과처럼
CSS3를 사용한 손쉬운 방법
배경에 이미지를 고정시키는 가장 손쉬운 방법은 CSS3를 사용하는 것이다. 물론 이미 이미지를 화면에 고정시키는 방법은 많이들 알고 있겠지만 여기서 중요한 점은 바로 전체화면에 꽉차게 영화나 TV를 보듯이 스크롤바도 없게 한다는 것이 요점이다.
| IE | Chrome | Firefox | Opera | Safari | |
|---|---|---|---|---|---|
| background-size | 9.0 부터 지원 | 지원 | 지원 | 지원 | 지원 |
어려울 것 없이 background-size 속성을 cover로 설정해 주면 된다. background-size의 속성값 더보기
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;
}
IE6~8을 지원하기 위해선 filter 속성을 사용해아 한다.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
위 필터를 사용하게 될 경우, 스크롤바가 생긴다거나 페이지내의 링크가 작동하지 않는다거나 그 밖의 문제가 생길수 있다는 것을 유념해야 한다. 이때 반드시 고정될 이미지를 <html>이나 <body> 요소의 배경으로 사용해서는 안된다. <div> 와 같은 요소에 position: fixed를 부여하고 width와 height를 각각 100%로 지정한다.
CSS-Only Technique #1
<img> 요소를 사용하여 배경을 고정시키는 법이다. 모든 브라우저를 지원하나 IE6의 경우 별도의 CSS 테그닉이 필요하며 IE7,8은 작은 사이즈의 이미지는 가운데 정렬이 되지 않으나 꽉찬 이미지는 가운데 정렬이 된다.
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
min-height를 이용하여 세로를 100%로 채우고 min-width를 1024px 보다 작지 않게 이미지를 표현한다.@media(미디어 쿼리)는 이미지보다 윈도우가 작아질때를 체크(1024px 이하일때)하여 이미지의 위치를 다시 정렬시킨다. 미디어 쿼리는 IE8 이하는 지원하지 않는다( 모바일이 아닌한은 크게 문제가 없다).
IE6에서는 position: fixed를 지원하지 않기 때문에 핵이나 다른방법을 사용해야한다.IE6 position fixed 보기
CSS-Only Technique #2
IE6~7과 opera에서는 작동하지 않는다.
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
img의 중앙 정렬을 위해 img를 또하나의 div로 감싸고 있다.
jQuery 플러그인
VEGAS BACKGROUND JQUERY PLUGIN
출처 : CSS-TRICKS
'웹코딩 > CSS' 카테고리의 다른 글
| CSS 가운데(중앙) 정렬 (20) | 2015.04.15 |
|---|---|
| float 레이아웃 문제 해결 (0) | 2013.12.13 |
| opacity 와 rgba (Transparent) (4) | 2012.12.31 |
| 웹폰트(@font-face) 온라인 서비스 (1) | 2012.12.30 |
| 웹폰트(@font-face) 적용법 #2 - Cufon 폰트 (0) | 2012.12.30 |
