블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

'CSS background image'에 해당되는 글 1건

  1. 2009.11.04 화면전체 배경이미지인 웹사이트 만들기


얼마전 "화면 가득 BG이미지 사용 웹디자인" 에서 소개했던 전체 백그라운드 사용기법에 대해서 소개하고자 한다.

가끔씩 좀더 디자인적인 요소가 가미된 웹페이지를 만드려다 보면 페이지전체에 백그라운드 이미지가 들어가야 하는 경우가 있다. 기존에는 이미지 용량을 최적화하기 위해 전체 플래쉬를 사용한다든가, 이미지를 디더링하여 용량을 감소시키는 경우가 있었다.
"백그라운드 이미지 사이즈 변경하기"의 개념과 유사하게 백그라운드 자체를 CSS만으로, 혹은 자바스크립트를 이용하여 풀스크린으로 띄우는 방법을 소개한다.

최종소스


원본출처  : 
CSS-Tricks


 

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

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

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



Technique #1

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

마크업

<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="images/bg.jpg" alt=""/>
                </td>

            </tr>
        </table>
    </div>
</div>

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를 적게 사용하여 개발하나 아주 좋은 기법이다. 
html과 body태그에 overflow:hidden값을 넣는게 우려되기는 하나 해당 페이지 스크롤바를 없애기 위한 방법이다.

아래와 같이 overflow:auto 컨텐츠 영역에 overflow:auto로 자동 스크롤바를 생기게 할 수 있다.
 
 <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;
}
 

IE6에서는 잘 동작하지 않으므로 MooTools 자바스크립트 라이브러리가 필요하다. (소스확인)


Technique #2

이번 기법은 위에서와 달리 별도의 "bg"클래스를 가진 div태그와 같은 wrapper 마크업이나 자바스크립트가 필요없이 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){
 img.bg {
  left: 50%;
  margin-left: -512px; }
}

div#content {
 /* This is the only important rule */
 /* We need our content to show up on top of the background */
 position: relative;

 /* These have no effect on the functionality */
 width: 500px;
 margin: 0 auto;
 background: #fff;
 padding: 20px;
 font-family: helvetica, arial, sans-serif;
 font-size: 10pt;
 line-height: 16pt;
 -moz-box-shadow: #000 4px 4px 10px;
 -webkit-box-shadow: #000 4px 4px 10px;
}

body {
 /* These rules have no effect on the functionality */
 /* They are for styling only */
 margin: 0;
 padding: 20px 0 0 0;
}






 

Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요