배경 이미지 테이블

Question

의 모든 작성하지 나는 다음과 같은 코드를 가지고

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat;background-size:930px 300px; border:10px solid #cccccc; "> 
    <tr><td height="60px" colspan="2"></td></tr> 
    <tr> 
    <td width="360px" height="180px" style="background-image: url('img'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " > 
     Text 
    </td> 
    <td width="570px"></td> 
    </tr> 
    <tr><td height="60px" colspan="2"></td></tr> 
</table> 

그리고이 JSFiddle 배경 이미지 http://jsfiddle.net/Hw4TJ/ 표시 등

- 그것이 테이블과 같은 크기로 설정되어 있지만 -에 큰 흰색 스트립을 가지고 바닥. 테이블에 테두리가 있기 때문에 이것은보기에 좋지 않습니다. 어떻게 고치는 지?

Answer 1

이미지의 높이가 너무 낮습니다. 배경 높이를 314px로 변경하십시오. 백그라운드에서 background-repeat 속성을 제거하면 이미지가 내용에 어울리는 지 확인할 수 있습니다.

Answer 2

문제가 <tbody> 및 <table>의 다른 어이, 그것은 같은 당신은 단지 배경의 크기 100 %를 변경 display:inline-block

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat; 
              display:inline-block; 
              background-size:930px 300px; 
              border:10px solid #cccccc; "> 
<tr><td height="60px" colspan="2"></td></tr> 
<tr> 
<td width="360px" height="180px" style="background-image: url('img/pc/backgroundv3.png'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " > 
Text 
</td> 
<td width="570px"></td> 
</tr> 
<tr><td height="60px" colspan="2"></td></tr> 
</table> 

DEMO Fiddle

Answer 3

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat;background-size:100% 100%; border:10px solid #cccccc; "> 
    <tr><td height="60px" colspan="2"></td></tr> 
    <tr> 
    <td width="360px" height="180px" style="background-image: url('img'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " > 
     Text 
    </td> 
    <td width="570px"></td> 
    </tr> 
    <tr><td height="60px" colspan="2"></td></tr> 
</table> 

에 테이블의 CSS를 줄 필요가 만들

Answer 4

take background-size : 100 % auto;

<table width="930px" height="300px" style="background-image: url('http://www.placekitten.com/200/175'); background-repeat:no-repeat;background-size:100% auto; border:10px solid #cccccc; "> 
    <tr><td height="60px" colspan="2"></td></tr> 
    <tr> 
    <td width="360px" height="180px" style="background-image: url('img'); background-repeat:no-repeat;background-size:360px 180px; font-family: Trajan; font-size: 50px; color: white; line-height: 80px; " > 
     Text 
    </td> 
    <td width="570px"></td> 
    </tr> 
    <tr><td height="60px" colspan="2"></td></tr> 
</table>