How to send bottom aligned background image under the fold when we resize the window height or screen size is shorter?

See this exam开发者_如何学JAVAple http://jsfiddle.net/nMs56/

it has an iphone image at bottom. currently when I drag browser to decrease the height background image is going towards top.

But I want it as if I resize the browser from bottom. images should not move and should go under the fold when i decrease the size of browser from bottom

like this for example

CSS

html, body { height: 100%; }
body { background: url("img/iphone_34.jpg") no-repeat bottom center; }

bottom center is keeping the bottom of the image aligned with the bottom edge of the viewport as you resize it. So when making the window shorter, the image will move up to compensate.

Try top center to always keep the top edge of the image aligned with the top of the viewport.

JSFiddle

EDIT:

As per further discussion with OP, the following was done using JavaScript/jQuery...

1) Initial window height is retrieved.

2) Image height is subtracted from window height to give the offset from the top of the window.

3) The background-position of the image is fixed using jQuery css() with the calculated offset from the top.

4) Resizing the window has no effect on the image's position since position is only calculated when the page initially loads.

Notes: The code assumes it's the same image and you know its height. The code could be altered to calculate an image's height if needed.

Original CSS placing the image is left intact as a fallback. Without JavaScript, image will still be placed at the bottom as in the OP's original code.

Full window demo: http://jsfiddle.net/nMs56/12/show/

Code: http://jsfiddle.net/nMs56/12/

Simply specify the vertical position in px like so:

body { background: url("http://digitaldaily.allthingsd.com/files/2007/06/iphone_34.jpg") no-repeat center 100px; }

When you use bottom it makes it relative to the page size. If you want it fixed then specify a value.

UPDATE:

You can also use %

All value types:

background-position: { { percentage | length | left | center | right } 1 or 2 values | inherit } ;

This should do it.

http://jsfiddle.net/qHNJL/4/

http://jsfiddle.net/qHNJL/4/show

HTML:

<!-- #hideImg and the image inside it is for getting the image height without defining a static height. -->
<div id="hideImg">
    <img src="http://digitaldaily.allthingsd.com/files/2007/06/iphone_34.jpg" alt"" />
</div>

<!-- The actual image -->
<div id="Image"></div>

This is normal you have positioned your background "bottom center" so it will be align to the bottom of the body try to fix it on top and you should be ok.