Background image not filling all of table

up vote
1
down vote

favorite

I have the following code

<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>

And as this JSFiddle shows http://jsfiddle.net/Hw4TJ/ the background image - although it is set to the same size as the table - has a big white strip at the bottom. As the table has a border, this looks rather bad. How to fix?

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

asked May 15 '14 at 13:43

CalvT

2,11942539

add a comment |

up vote
1
down vote

favorite

I have the following code

<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>

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

asked May 15 '14 at 13:43

CalvT

2,11942539

add a comment |

up vote
1
down vote

favorite

I have the following code

<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>

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

asked May 15 '14 at 13:43

CalvT

2,11942539

I have the following code

<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>

html css html-table

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

asked May 15 '14 at 13:43

CalvT

2,11942539

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

asked May 15 '14 at 13:43

CalvT

2,11942539

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

edited Nov 7 at 19:19

Brian Tompsett - 汤莱恩

4,153133699

asked May 15 '14 at 13:43

CalvT

2,11942539

asked May 15 '14 at 13:43

CalvT

2,11942539

asked May 15 '14 at 13:43

CalvT

2,11942539

add a comment |

4 Answers
4

active

oldest

votes

up vote
2
down vote

Problem is different heigh of <tbody> and <table>, to make it same you need to give css of table to 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

edited May 15 '14 at 14:00

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

Ok, that works fine, but it stretches the image. If I just edit the table height a less 14px and left the image at 300px - would that work?
– CalvT
May 15 '14 at 13:54

If you don't want your image to be stretch, you can make it repeat in x direction and specify width to auto like, background-repeat:repeat-x;background-size: auto 300px;, see demo
– Ravi Dhoriya ツ
May 15 '14 at 13:59

add a comment |

up vote
1
down vote

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>

answered May 15 '14 at 14:21

user3484552

add a comment |

up vote
0
down vote

The height of the image is too low. try changing the background height to 314px. If you remove the background-repeat attribute from background you can see how the image fit the content.

edited May 15 '14 at 13:54

user2929319

answered May 15 '14 at 13:47

faby

6,26121937

add a comment |

up vote
0
down vote

<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>

just change background size 100%

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f23680093%2fbackground-image-not-filling-all-of-table%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

up vote
2
down vote

Problem is different heigh of <tbody> and <table>, to make it same you need to give css of table to 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

edited May 15 '14 at 14:00

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

Ok, that works fine, but it stretches the image. If I just edit the table height a less 14px and left the image at 300px - would that work?
– CalvT
May 15 '14 at 13:54

If you don't want your image to be stretch, you can make it repeat in x direction and specify width to auto like, background-repeat:repeat-x;background-size: auto 300px;, see demo
– Ravi Dhoriya ツ
May 15 '14 at 13:59

add a comment |

up vote
2
down vote

Problem is different heigh of <tbody> and <table>, to make it same you need to give css of table to 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

edited May 15 '14 at 14:00

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

Ok, that works fine, but it stretches the image. If I just edit the table height a less 14px and left the image at 300px - would that work?
– CalvT
May 15 '14 at 13:54

If you don't want your image to be stretch, you can make it repeat in x direction and specify width to auto like, background-repeat:repeat-x;background-size: auto 300px;, see demo
– Ravi Dhoriya ツ
May 15 '14 at 13:59

add a comment |

up vote
2
down vote

Problem is different heigh of <tbody> and <table>, to make it same you need to give css of table to 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

edited May 15 '14 at 14:00

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

Problem is different heigh of <tbody> and <table>, to make it same you need to give css of table to 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

edited May 15 '14 at 14:00

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

edited May 15 '14 at 14:00

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

answered May 15 '14 at 13:48

Ravi Dhoriya ツ

4,19582742

Ok, that works fine, but it stretches the image. If I just edit the table height a less 14px and left the image at 300px - would that work?
– CalvT
May 15 '14 at 13:54

If you don't want your image to be stretch, you can make it repeat in x direction and specify width to auto like, background-repeat:repeat-x;background-size: auto 300px;, see demo
– Ravi Dhoriya ツ
May 15 '14 at 13:59

add a comment |

Ok, that works fine, but it stretches the image. If I just edit the table height a less 14px and left the image at 300px - would that work?
– CalvT
May 15 '14 at 13:54

If you don't want your image to be stretch, you can make it repeat in x direction and specify width to auto like, background-repeat:repeat-x;background-size: auto 300px;, see demo
– Ravi Dhoriya ツ
May 15 '14 at 13:59

Ok, that works fine, but it stretches the image. If I just edit the table height a less 14px and left the image at 300px - would that work?
– CalvT
May 15 '14 at 13:54

If you don't want your image to be stretch, you can make it repeat in x direction and specify width to auto like, background-repeat:repeat-x;background-size: auto 300px;, see demo
– Ravi Dhoriya ツ
May 15 '14 at 13:59

add a comment |

up vote
1
down vote

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>

answered May 15 '14 at 14:21

user3484552

add a comment |

up vote
1
down vote

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>

answered May 15 '14 at 14:21

user3484552

add a comment |

up vote
1
down vote

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>

answered May 15 '14 at 14:21

user3484552

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>

answered May 15 '14 at 14:21

user3484552

answered May 15 '14 at 14:21

user3484552

answered May 15 '14 at 14:21

user3484552

answered May 15 '14 at 14:21

user3484552

add a comment |

up vote
0
down vote

The height of the image is too low. try changing the background height to 314px. If you remove the background-repeat attribute from background you can see how the image fit the content.

edited May 15 '14 at 13:54

user2929319

answered May 15 '14 at 13:47

faby

6,26121937

add a comment |

up vote
0
down vote

The height of the image is too low. try changing the background height to 314px. If you remove the background-repeat attribute from background you can see how the image fit the content.

edited May 15 '14 at 13:54

user2929319

answered May 15 '14 at 13:47

faby

6,26121937

add a comment |

up vote
0
down vote

The height of the image is too low. try changing the background height to 314px. If you remove the background-repeat attribute from background you can see how the image fit the content.

edited May 15 '14 at 13:54

user2929319

answered May 15 '14 at 13:47

faby

6,26121937

The height of the image is too low. try changing the background height to 314px. If you remove the background-repeat attribute from background you can see how the image fit the content.

edited May 15 '14 at 13:54

user2929319

answered May 15 '14 at 13:47

faby

6,26121937

edited May 15 '14 at 13:54

user2929319

edited May 15 '14 at 13:54

user2929319

edited May 15 '14 at 13:54

user2929319

answered May 15 '14 at 13:47

faby

6,26121937

answered May 15 '14 at 13:47

faby

6,26121937

answered May 15 '14 at 13:47

faby

6,26121937

add a comment |

up vote
0
down vote

<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>

just change background size 100%

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

add a comment |

up vote
0
down vote

<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>

just change background size 100%

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

add a comment |

up vote
0
down vote

<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>

just change background size 100%

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

<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>

just change background size 100%

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

answered May 15 '14 at 13:58

Ankit Agrawal

3,33931743

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk