problem with image scaling in safari for fluid design

Question

I'm trying to make a fluid website where you can see the website full screen on different size monitors,

for images I'm using height:100% and Width:100%, everything looks ok in firefox,IE8 but in Safari and Google chrome the image gets distorted,does anyone know why this happens?

thanks

<div id="main_wrapper">
 <img id="main_bg" src="images/main-bg.jpg" />

 <div id="main_content">

    ........
    </div>
</div>

 #main_bg {

    width:100%;
    max-width:100%;
    height:100%;
    max-height:100%;
} 

Answer 1

If by "distorted" you mean pixelized, it's a case of the browser not being very good at scaling up images. Good scaling like you might get from Photoshop is quite expensive, and some browsers implement much faster (but less smooth) scaling to keep rendering times down.