본 기술과 이미지는 GOTOCHINA 및 CSS-TRICKS 에서 가져온것임을 밝히며 다음과 같은 기능들로 구성된다.

• 여백없이 이미지로 전체페이지 채우기
• 필요한만큼 이미지 크기 정하기
• 이미지를 페이지중간에 정렬하기
• 스크롤바 생기지 않게하기
• 크로스브라우저 호환
• 플래쉬같은 장난질 하지 않기(? ) : Isn't some fancy shenanigans like flash

이러한 기능요구사항은 매우 까다로운 주문사항이다. 무엇보다 이미지 사이즈를 변경하는 것은 전통적인 CSS background-image속성에 위배되기 때문이다.



Technique #1

인라인 이미지(Inline image)는 아래와 같이 페이지내에서 특정한 목적에 따라 어떠한 요소로 둘러싸여 있다.
( 데꾸벅 주 :
   이미지는 원래 속성은 block-level요소가 아니라 span태그와 같이 inline-level요소 이므로 크기를 고정시키기 위해 block-level요소 태그들에 의해 둘러쌓여있다.

마크업

CSS :

* {
    margin: 0;
    padding: 0;
}
html, body, #bg, #bg table, #bg td {


    height:100%;
    width:100%;
    overflow:hidden;



}




#bg {


    position: fixed;


}




#bg div {


    height:200%;


    left:-50%;


    position:absolute;


    top:-50%;


    width:200%;


}




#bg td {


    text-align:center;


    vertical-align:middle;


}




#bg img {


    margin:0 auto;


    min-height:50%;   //safari4.0과 chrome에서는 min-height가 잡히지 않음


    min-width:50%;


}

위 소스는 마크업과 CSS를 적게 사용하여 개발하나 아주 좋은 기법이다. 

 <div id="cont">


    <div class="box">


          <!-- 내용 들어가는곳-->


    </div>


</div>

#cont {


    position:absolute;


    top:0;left:0;


    z-index:70;


    overflow:auto;


}

.box {


    margin: 0 auto;


    width: 400px;


    padding: 50px;


    background: white;


    padding-bottom:100px;


    font: 14px/2.2 Georgia, Serif;



}