css background-size:cover 익스8에서도 가능하도록

이미지를 브라우저 크기에 맞추어 풀사이즈로 보여주게 하고

브라우저 크기가 줄어들더라도 센터를 유지하면서 작아지게 하도록 하려 한다.

그리고 1개의 이미지가 아닌 여러장을 나열하는 방식으로 코딩하려고 하는데

background-size:cover 라는 스타일 자체가 익스 9버전부터 작동한다고 해서 찾아봤다.

backgroundsize.min.htc 을 이용해서 스타일을 주고 width는 100%, height는 원본 이미지의 크기로 설정한다.

<style  type="text/css">

.p1 {width:100%;height:978px;background:url('img/1-bg.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover;-ms-behavior:url('backgroundsize.min.htc');}

.p2 {width:100%;height:1100px;background:url('img/2-bg.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover;-ms-behavior:url('backgroundsize.min.htc');}

.p3 {width:100%;height:1100px;background:url('img/3-bg.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover;-ms-behavior:url('backgroundsize.min.htc');}

.p4 {width:100%;height:1063px;background:url('img/4-bg.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover;-ms-behavior:url('backgroundsize.min.htc');}

</style>

<div id="wrap">

    <div class="p1"></div>

    <div class="p2"></div>

    <div class="p3"></div>

    <div class="p4"></div>

</div>