테이블 배경에 style 적용하기

테이블 배경에 관한 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 을 사용하기도합니다.

---견본이미지-----

background-repeat:no-repeat; 배경 이미지를 반복하지 않고 한번만 표시 <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat; background-position:center;"> <tr><td> 본문 내용 </td></tr></table>

이번엔 가로로 그림을 정열해 보겠습니다.      위의 소스에서 background-repeat:no-repeat 부분을      background-repeat:repeat-x 로 바꿔 주면 됩니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:repeat-x; background-position:center;"> <tr><td> 본문 내용 </td></tr></table>

본문 내용이번엔 세로로 그림을 정열해 볼까요. 위의 소스에서 background-repeat:repeat-x 부분을 background-repeat:repeat-y 로 바꿔 주면 됩니다. 배경이 중앙에 있어서 세로로 정열하니깐 보기가 좀그러네요. 정열을 왼쪽으로 하죠 그럴려면 background-position:center를 background-position:left 바꾸시면됩니다 <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:repeat-y; background-position:left;"> <tr><td> 본문 내용 </td></tr></table>

background-position:left top 으로 하면 좌측상단에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat;  background-position:left top;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td></tr></table>

background-position:center top 으로 하면 중앙 상단에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat;  background-position:center top;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td></tr></table>

background-position:right top 으로 하면 우측 상단에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat;  background-position:right top;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td></tr></table>

background-position:left center 으로 하면 좌측 중간에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat;  background-position:left center;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td></tr></table>

background-position:center center 으로 하면 정중앙에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat;  background-position:center center;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td></tr></table>

background-position:right center 으로 하면 우측 중간에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat; background-position:right center;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr> <td> 내용 </td>/tr></table>

background-position:left bottom 으로 하면 좌측하단에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat; background-position:left bottom;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td></tr></table>

background-position:center bottom 으로 하면 중앙 하단에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat; background-position:center bottom;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td>/tr></table>

 

background-position:right bottom 으로 하면 우측 하단에 그림이 위치 합니다. <table width=500 height=400 style="background-image:url(https://t1.daumcdn.net/cfile/blog/1125DC154B36B2BC93); background-repeat:no-repeat; background-position:right bottom;" border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr><td> 내용 </td></tr></table>

 

이렇게 배경 그림을 마음대로 위치 시킬수가 있습니다 좀더 큰 테이블에서 배경그림의 위치를 세밀하게 조정 하실려면 % 를 사용 하시면 더욱 미세한 위치까지 설정할수 있습니다 left top 대신 10% 65%를 넣어 보세요 예를 다보여 드리면 좋겠지만 스스로 연구해보는것도 좋을듯 하네요. 가로정열이나 세로 정열시에도 위와 같은 위치조절법을 사용 하시면 됩니다.