CSS 배경 스타일

배경 스타일

   background-color: 배경색상

   background-image: 배경이미지

   background-repeat: 배경의 반복

   background-position:배경의 위치(반복할 경우 시작위치)

   background-attachment: 배경의 고정 유무

   background-size(CSS 3) : 백그라운드 이미지의 크기를 지정하는 속성.

■ background

    배경을 지정

    background:    색상 url("이미지경로") 반복유무 x축위치 y축위치 고정유무; 

    값 :    [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit

         inherit :     부모 요소의 값을 상속하도록 지정

    스크립트

this.style.background

this.style.backgroundImage

    예 : body { background: red }

         body {background:#FFFFFF url("./images/bg.gif") repeat-x left top scroll;}

         p { background: url("chess.png") gray 50% repeat fixed }

■ background-color

    배경색을 지정

    Scripting : object.style.backgroundColor [ = sColor ] 

   body {background-color:#FFFFFF;}

   #container {background-color:transparent;} /* 배경 투명하게*/

■ background-image

   배경 이미지를 지정

   Scripting : object.style.backgroundImage [ = sImage ] 

  <div style="width:250; height:250; background-image: url(bg.gif)"></div> 

■ background-repeat

   백그라운드 리핏은 배경이미지의 반복을 지정하는 속성.

   속성

     repeat : 배경이미지가 반복적으로 적용(바둑판식). 기본값.

     repeat-x : 배경이미지가 가로방향으로만 반복적으로 적용.

     repeat-y : 배경이미지가 세로방향으로만 반복적으로 적용.

     no-repeat : 배경이미지가 반복적으로 적용되지 않고 한번만 적용.

     tile : 수직, 수평 반복

   <div style="width:250; height:250; background-image: url(bg.gif); background-repeat:repeat-x"></div>

   <div style="width:250; height:250; background-image: url(bg.gif); background-repeat:repeat-y"></div> 

 

■ background-position

    배경색과 이미지(위치)의 시작 상태를 지정한다. 반복 특성은 background-repeat 에서 지정 한다. 수치로 위치를 지정(백분율/길이) 할 때는 수평, 수직 순으로 한다. 가로 값 만을 지정하면, 세로 값은 자동으로 50%가 된다. 길이와 백분율의 섞어 쓰기는 허용되지 만, 이때 길이는 10% -2cm처럼 음수 만 가능하다. 그러나 백분율과 길이의 섞어 쓰기는 허용되지 않는다.

  속성

     percentage | length | {1,2} | top | center | bottom | left | center | right

  백분율

      값의 짝 '0% 0%'는 이미지의 맨위 왼쪽 모서리가 박스의 패딩 모서리의 맨위 왼쪽 모서리에 정렬된다.

      값의 짝 '100% 100%'는 이미지의 맨아래 오른쪽 모서리가 패딩 지역의 맨아래 오른쪽 모서리에 위치한다.

      값의 짝 '14% 84%'는 이미지의 가로 오른쪽으로 14%와 수직적 아래로 84% 의 점이 패딩 지역의 가로 오른쪽으로 14%와 수직적 아래로 84% 의 점에 위치한다. 

  길이

    값의 짝 '2cm 2cm'는 이미지의 맨위 왼쪽 모서리가 패딩(padding) 지역의 맨위 왼쪽 모서리에서 오른쪽 2cm 아래쪽으로 2cm 점에 위치한다.

  예 : body {background-position: top center;}

       body { background: url("banner.jpeg") right top }  /* 100%   0% 와 동일 */

       body { background: url("banner.jpeg")  top center }  /*  50%   0% 와 동일 */

       body { background: url("banner.jpeg")  center }   /*  50%  50% 와 동일 */

       body { background: url("banner.jpeg")  bottom }   /*  50% 100% 와 동일 */

 

■ background-attachment

   문서가 스크롤될때 배경이미지의 스크롤여부를 지정. 이 속성을 사용하지 않으면 기본적으로 문서와 함께 스크롤

  속성

    scroll : 브라우저 화면을 스크롤하면 배경이미지도 이동(기본)

    fixed : 브라우저화면을 스크롤 해도 배경이미지 고정

    inherit : 부모(상위) 요소의 성질을 그대로 물려 받음

  Scripting : object.style.backgroundAttachment [ = sAttachment ] 

  예 : body {background-attachment: scroll;}

       body {background:url(path/image.gif); background-attachment:fixed;}

       <P onclick="this.style.backgroundAttachment='fixed';" ondblclick="this.style.backgroundAttachment='scroll';" >...</p>

■ background-size(CSS 3)

   백그라운드 이미지의 크기를 지정하는 속성. 

  - 사용 형식 

     background : 80px 60px; | % | cover | contain

  - 사용예

    #myDIV {

     background:url(img.gif);

     background-size:80px 60px;

     background-repeat:no-repeat;

     padding-top:40px;

  }

■ background-origin(CSS 3)

   백그라운드 오라진은 백그라운드 이미지의 위치를 지정하는 속성.

  -형식

     background-origin : border-box | padding-box | content-box

  - 사용예

    #myDIV {

      padding:25px;

      border:5px dotted #000000;

      background-image:url('smiley.gif');

      background-origin:padding-box;

      background-repeat:no-repeat;

    }

■ background-slice(CSS 3)

   백그라운드 영역을 지정하는 속성.

   background-origin 이 border-box 이고 background-clip 이 content-box 이면 border-box 영역의 이미지는 화면에 보이지 않는다.

  -형식

   background-clip : border-box | padding-box | content-box

  - 사용예

    #myDIV {

      padding:25px;

      border:5px dotted #000000;

      background-color:yellow;

      background-clip:border-box;

    }