본문으로 바로가기

배경이미지 전체화면 고정하기

category StyleSheet/CSS 2015. 12. 29. 09:15

Background Image Full Screen

디스플레이에 이미지나 배경을 고정시키는 방법은 뒷배경은 고정되어 있고 위에 있는 요소만 움직이게 하는 방법이 일반적으로 많이 이용되고 있습니다.

이에 대한 방법을 간단히 소개하고자 합니다.




풀스크린 이미지의 경우 웹브라우저의 가로,세로 넓이에 그대로 맞춰서 요소(element)를 생성하는 방식입니다. 

전면에 원하는 이미지를 꽉 채워서 놓을 수 있을 뿐만 아니라 스크롤을 아래로 내리면 콘텐츠가 보이게 할 수도 있습니다.

하지만 너무 많이 쓰면 스크롤시 성능이슈와 UI 적으로 complex 한 단점이 있습니다.



CSS3를 이용한 방법

배경에 이미지를 고정하는 가장 쉬운 방법은 CSS3를 사용하는 것입니다. 

이미 이 방법을 알고 많이 사용하고 있겠지만 짚고 넘어가 보도록 하겠습니다.


 Property

IE 

Chrome 

Firefox 

Safari 

Opera 

background-size 

 IE9+

 지원

지원 

지원 

지원 


지금 사용하는 방법은 풀스크린과 스크롤바를 생성하지 않으면서 IE6~8 을 지원하기 위해 사용되는 방법입니다.


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

/* Support IE6~8 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

위 코드와 같이 background-size 속성을 cover 로 설정해 주고 IE6~8을 지원하기 위해 filter 속성을 추가로 작성합니다.

이때 반드시 고정될 이미지를 <html> 이나 <body> 요소의 배경으로 사용해서는 안되고 <div> 와 같은 요소에 position:fixed 를 부여하고 width와 height를 각각 100%로 지정하여 줍니다.


필터를 사용할 경우, 페이지내의 링크가 작동하지 않는다거나 스크롤바가 생기거나 그 밖의 문제가 발생할 수 있다는 것에 주의바랍니다.

background-size 속성값 살펴보기




img 요소 : CSS-Only Technique #1

img 요소를 사용하여 배경을 고정시키는 방법으로 모든 브라우저를 지원하지만 IE6의 경우 별도의 CSS 테크닉이 필요하며 IE6,7의 경우 작은 사이즈의 이미지는 가운데 정렬이 되지 않으나 꽉찬 이미지는 가운데 정렬이 됩니다.


CSS
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이하는 지원하지 않기 때문에 이를 지원하기 위해서는 respond.js 사용이 필요합니다.

  • IE6 미지원




img 요소 : CSS-Only Technique #2


  • IE6~7 및 Opera 에서는 동작하지 않습니다.
HTML
<div id="bg">
    <img src="images/bg.jpg" alt="">
</div>


CSS
#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로 감싸고 있습니다.

그리고 widht, height를 200%로 설정한 후 left, top값을 -50%(200%에 대해 -50%를 하여 100%로 정렬하게 함)인 음수값을 이용하여 풀스크린에 꽉차게 하고, img 요소에 absolute를 이용하여 div요소에 꽉차도록 이용한 방법입니다.

(참고로 이 방법은 masking 을 이용할 때도 사용됩니다.)


참고 : jQuery 플러그인

VEGAS Background jQuery plugin

MaxImage & slideshow background Demo


참고 사이트 : Rainy Mood


Jaehee's WebClub



[출처] WEBDIR - 흉내쟁이님