Safari CSS Problem / Background image - html

Question

I have a full screen background image, which keeps the aspect ratio and works in all browsers fine but not in Safari. I'm good at CSS but at this point I don't know exactly what the problem is. It seems that Safari has a problem keeping the vertical center and creates gaps at the top and bottom:
<div id="bg">
<div style="display: table-cell">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="loading"><img src="images/home.jpg" /></td>
</tr>
</table>
</div>
</div>
CSS:
html,body,#bg,#bg table,#bg td {
width:100%;
height:100%;
overflow:hidden;
position: relative
}
#bg div{
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%
}
#bg td{
vertical-align:middle;
text-align:center
}
#bg img{
min-height:50%;
min-width:50%;
margin:0 auto;
display: table
}
Any CSS crhacks here?

Answer 1

If you are looking to use an actual image as a background instead of a background image in your CSS, a JavaScript solution might be better suited for your needs as it doesn't introduce extraneous markup into your design.
Check out jQueryMaxImage: http://www.aaronvanderzwan.com/maximage/ and here's one that I wrote, jquery.FullScreenBG: https://github.com/huntedsnark/jquery.fullScreenBG
If you don't want to do it with a script there is a way to do it using CSS# plus non-standard CSS for compatability:
html {
background: url(images/yourImage.jpg) no-repeat center center fixed;
/* CSS3 */
background-size: cover;
/*other browser specific */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* non-standard for IE */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.yourImage.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourImage.jpg', sizingMethod='scale')"
}
You really should not be adding all kinds of table markup for the sake of a background image.