dirty table image hack

HTML

<table class="header">
        <tr>           
            <td class="header" style="background-image:url('https://lh3.googleusercontent.com/-_b3JoGreCXk/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gQpiF7fr_57Wj4GdO1EgP1GJlNhg/mo/photo.jpg')">
                <img src="https://lh3.googleusercontent.com/-_b3JoGreCXk/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gQpiF7fr_57Wj4GdO1EgP1GJlNhg/mo/photo.jpg" />
            </td>
            <td class="header" style="background-image:url('https://lh3.googleusercontent.com/-_b3JoGreCXk/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gQpiF7fr_57Wj4GdO1EgP1GJlNhg/mo/photo.jpg')">
                <img src="https://lh3.googleusercontent.com/-_b3JoGreCXk/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gQpiF7fr_57Wj4GdO1EgP1GJlNhg/mo/photo.jpgg" />
            </td>
            <td class="header" style="background-image:url('https://lh3.googleusercontent.com/-_b3JoGreCXk/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gQpiF7fr_57Wj4GdO1EgP1GJlNhg/mo/photo.jpg')">
                <img src="https://lh3.googleusercontent.com/-_b3JoGreCXk/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gQpiF7fr_57Wj4GdO1EgP1GJlNhg/mo/photo.jpg" />
            </td>
        </tr>
</table>

CSS

table {
    width: 94%;
    border: 0;
    background: black;
    margin-left: 5%;
    margin-right: 5%;
    vertical-align: middle;
}
td {
    width: 25%;
    height: auto;
    text-align: center;
    vertical-align: middle; 
    background-repeat: no-repeat;            
    background-size: cover;
    overflow-x: hidden;
    display: inline-block;
}

td img {
    opacity: 0;
    width: 100%;
    height: auto;
}