Cell background color shows behind image

Question

This has been driving me crazy. There is always aqua showing around the image! I am trying to completely fill the cell with the image, so there is no gap.

<!doctype html>
<html>
<head>
</head>

<body>
    <table style="border-spacing: 0; background-color: black;">
    <tr>
        <td style="width: 600px; height: 44px; border-spacing: 0; background-color: aqua">
        <img style="display: block; width: 100%" src="...banner.jpg">
        </td></tr></table>
</body>
</html>

Try removing `width: 600px; height: 44px;` If you set dimensions larger than the image, then the `background-color: aqua` will show — Rojo, Aug 31 '21 at 18:03
Those dimensions are actually the exact size of the image. I removed it and the problem remains. There is always an area around the image that shows the background, it never completely fills the cell. — Bryan Monesson-Olson, Aug 31 '21 at 18:12
https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do — epascarello, Aug 31 '21 at 18:45

score 0 · Answer 1 · answered Aug 31 '21 at 18:42

I'm curious if someone can explain this to me. I have corrected my issue, but I don't understand how. I set the margin and padding to 0px. Why was there a margin or padding? Is there a default value for them?

<!doctype html>
<html>
<head>
</head>

<body style="background: yellow">
    <table style="border-spacing: 0; background-color: black;">
    <tr>
        <td style="border-spacing: 0; padding: 0px; margin: 0px; background-color: aqua">
        <img style="display: block; width: 100%" src="http://blogs.umass.edu/bolson/files/2021/08/CCPH-Banner.jpg">
        </td></tr></table>
</body>
</html>

score -1 · Answer 2 · answered Aug 31 '21 at 18:05

-1

Try this code

<!doctype html>
<html>
<head>
</head>

<body>
    <table style="border-spacing: 0; background-color: black;">
    <tr>
        <td style="width: 600px; height: 44px; border-spacing: 0; background-color: transparent;>
        <img style="display: block; width: 100%" src="...banner.jpg">
        </td></tr></table>
</body>
</html>

answered Aug 31 '21 at 18:05

Sahil Palad

56
4

Now I see black from the table background. I am trying to get the image to completely fill the cell. – Bryan Monesson-Olson Aug 31 '21 at 18:10
Try This

– Sahil Palad Aug 31 '21 at 18:17
That doesn't cause the image to fill the cell it just makes that space whatever color is behind the cell, in my case, it is now the color of the body background. I'm trying to get the image to completely fill the cell leaving no gaps. – Bryan Monesson-Olson Aug 31 '21 at 18:32
Can you share screenshot or image then i can help you better There is body space you can add the style on body may be this is the answer that you are looking – Sahil Palad Aug 31 '21 at 18:48

Cell background color shows behind image

2 Answers2