Question

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;
            height:1600px;
            background-repeat:no-repeat;

        }

Answer 1

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.