테이블의 배경그림을 style을 이용하는 방법에 관하여 알아보겠습니다 이것은 테이블뿐만 아니라 css를 작성하여 body의 배경고정할때 사용하여도 됩니다.

 

배경에 관한 style 속성
style="background-color:색상코드; background-image:url(이미지 주소);background-attachment:fixed;
background-repeat:요소; background-position:정열위치;"

  1. background-color:색상코드
      background-color 속성은 요소의 배경색을 설정하는속성입니다
      여기에서 설정한값은 박스의 내용과 패딩부분에 적용되며 여백부분은 항상 투명합니다.
      초기값은 transparent(투명)이며요소에 16진수의 색상 코드를 넣어주시면 됩니다.

  2. background-image:url(이미지 웹주소)
      background-image속성은 요소의 배경 이미지를 설정하는 속성 입니다.
      여기에서 설정한 이미지는 박스의 내용과 패딩부분에 적용되며 여백부분은 항상 투명합니다.
      환경에 따라서는 배경 이미지가 표시되지 않는 경우도 있기 때문에 배경색도 함께
      지정해 주는것이 좋습니다.
      url : 배경 이미지의 url을 지정합니다.
      none : 배경 이미지를 사용하지 않는것을 표시 합니다.

  
3. background-attachment:
      background-attachment 속성은 배경 이미지가 지정되어 있는 경우 그이미지를(윈도우에 대하여)
      그위치에 고정하게 할것인지, 스크롤에 따라서 내용도 함께 이동시킬것인지를 설정하는
      속성 입니다.
      fixed -배경 이미지의 위치를 고정 시킵니다.
      scroll- 배경 이미지를 다른 내용과 함께 스크롤 되도록 합니다.

  4. background-repeat:
       배경 이미지의 정열을 설정하는 속성입니다
       repeat ; 배경 이미지를 바둑판식 배열로 정열합니다
       repeat-x ; 배경 이미지를 가로방향으로 반복해서 정열합니다
       repeat-y ; 배경 이미지를 세로방향으로 반복해서 정열합니다
       no-repeat ; 배경 이미지를 반복하지 않고 한번만 표시 합니다.

  5. background-position:
      background-position은 배경 이미지의 표시위치를 설정하는 속성 입니다.
      지정하는 단위로는 실수 값을 사용할수도 있고 %,
      또는 left center right top bottom 을 사용하기도합니다.

 

예를 보면서 알아보죠

이런 작은 그림이 하나 있습니다.
이것을 넓이가 500 이고 높이가 400쯤되는 테이블에 배경그림으로 하면

 

 

    

이렇게 나오죠.
그림이 반복되어 나오게 됩니다.
그림을 반복되지 않게 하고 글넣을곳은 크게 하고 싶을때가 있습니다.
이럴때 style을 이용하여 만들수 있습니다.

 

예를보겠습니다

1. background-repeat:no-repeat;
     배경 이미지를 반복하지 않고 한번만 표시
     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:center;">
        <tr>
          <td>
           본문 내용
          </td>
        </tr>
     </table>

 

 

결과보기

 

<PRE> 가을 편지 이 해 인 1 그 푸른 하늘에 당신을 향해 쓰고 싶은 말들이 오늘은 단풍잎으로 타버립니다 밤새 산을 넘은 바람이 손짓을 하면 나도 잘 익은 과일로 떨어지고 싶습니다 당신 손 안에 </PRE>

이렇게 테이블 내에 그림이 한장만 표시 되었습니다.

 

 

 2. 이번엔 가로로 그림을 정열해 보겠습니다.
     위의 소스에서 background-repeat:no-repeat 부분을
     background-repeat:repeat-x 로 바꿔 주면 됩니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:repeat-x;
         background-position:center;">
        <tr>
          <td>
           본문 내용
          </td>
        </tr>
     </table>

 

 

결과보기

 

 

 

 

 

3. 이번엔 세로로 그림을 정열해 볼까요.
     위의 소스에서 background-repeat:repeat-x 부분을
     background-repeat:repeat-y 로 바꿔 주면 됩니다.
     배경이 중앙에 있어서 세로로 정열하니깐 보기가 좀그러네요.
     정열을 왼쪽으로 하죠
     그럴려면 background-position:center를 background-position:left
     로 바꾸시면됩니다

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:repeat-y;
         background-position:left;">
        <tr>
          <td>
           본문 내용
          </td>
        </tr>
     </table>

 

 

결과보기

 

 

 

이렇게 여러 형태로 배경을 사용할수 있습니다. 배경그림의 위치설정(background-position:)에 관하여 좀더 알아 보겠습니다. 지금까지의 배경 그림은 중앙정렬이었지만 내가 원하는 위치에 그림을 넣을수가 있습니다. 쉬운방법이 left center right top bottom 을 이용 하는 방법이고 %를 사용해도 됩니다 그럼 left center right top bottom 의 사용방법을 먼저 알아보죠

 

 

1. background-position:left top 으로 하면 좌측상단에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:left top;">
        <tr>
          <td>
           background-position:left top;
          </td>
        </tr>
     </table>

 

결과보기

 

 

 

background-position:left top;

 

 

2. background-position:center top 으로 하면 중앙 상단에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:center top;">
        <tr>
          <td>
           background-position:center top;
          </td>
        </tr>
     </table>

결과보기

 

background-position:center top;

 

3. background-position:right top 으로 하면 우측 상단에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:right top;">
        <tr>
          <td>
           background-position:right top;
          </td>
        </tr>
     </table>

 

 

 

 

4. background-position:left center 으로 하면 좌측 중간에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:left center;">
        <tr>
          <td>
           background-position:left center;
          </td>
        </tr>
     </table>

 

 

 

 

5. background-position:center center 으로 하면 정중앙에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:center center;">
        <tr>
          <td>
           background-position:center center;
          </td>
        </tr>
     </table>

 

background-position:center center;

 

 

6. background-position:right center 으로 하면 우측 중간에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:right center;">
        <tr>
          <td>
           background-position:right center;
          </td>
        </tr>
     </table>

 

 

 

7. background-position:left bottom 으로 하면 좌측하단에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:left bottom;">
        <tr>
          <td>
           background-position:left bottom;
          </td>
        </tr>
     </table>

 

 

 

8. background-position:center bottom 으로 하면 중앙 하단에 그림이 위치 합니다.

     <table width=500 height=400
         style="border:10 double orange; background-color:#FFFFFF; background-attachment:fixed;
         background-image:url(http://mysesang.com/pic/pic11.jpg); background-repeat:no-repeat;
         background-position:center bottom;">
        <tr>
          <td>
           background-position:center bottom;
          </td>
        </tr>
     </table>