CSS Safari Problem / Background Image

Question

I have a full screen background image that maintains aspect ratio and works fine in all browsers, but not in Safari. I'm good at CSS, but at the moment I don’t know exactly what the problem is. It seems that Safari has problems maintaining the vertical center and creating gaps above and below:

<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 cr hacking hub?

Answer 1

If you want to use the actual image as the background instead of the background image in your CSS, the JavaScript solution may be better suited to your needs, as it does not introduce extraneous markup into your design.

Check out jQueryMaxImage: http://www.aaronvanderzwan.com/maximage/ and here is the one I wrote, jquery.FullScreenBG: https://github.com/huntedsnark/jquery.fullScreenBG

If you don't want to do this with a script, this is the way to do it using CSS # plus custom CSS for compatibility:

 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 add all kinds of table layout for your background image.