css image background in body auto-resize

i am trying to embed an image within an iframe, the size of which i am not sure. i tried as below but it does not seem to work.

please let me know how to proceed.

what i exactly want to do is, the image should auto-fit into the page. image is smaller than the page, so when i remove no-repeat multiple instances of image are visible on the screen.

Please help thanks.

 body{
            background-image:url(someimageurl);
            width:1400px;
  开发者_如何学JAVA          height:1600px;
            background-repeat:no-repeat;

        }

Rodin is on the right track. In pure CSS you can only do it with CSS3 and only the latest versions of browsers are going to work. You can however fake it by putting an absolutely positioned image in the corner of the page with width and height set to 100%. Then some z-index work to put the content over the top of the image.

The HTML:

<img class="background" />
<div class="wrapper">
content goes here
</div>

The CSS:

img.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index}
div.wrapper{position:relative;z-index:1;}

See it here - http://jsfiddle.net/snkg8/ FYI - this won't work in IE6 without some extra CSS hacks, but I don't bother with IE6 anymore.

You have a css property for the background size:

background-size: 100%;

Unfortunately, it is a CSS3 property and only supported in the newest browsers (IE9, Firefox4)

By using css3,

html { 
background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This works in all browsers and ie9+. The following filters works in ie7 and ie8 too.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";