jQuery <div> background image full size stretch

Question

Basically what I'm trying to do is recreate this site with pure HTML, CSS and jQuery.

At present the site is not doing too well in search results, obviously because it's Flash, so that's what I'm trying to fix.

What I'm looking for is quite complex, but I'll gladly take solutions for any of the seperate parts needed and I'll figure out how to put them all together. I've searched high and low all over the internet and call find anything close to what I want.

Here's what I need. It's mainly the image DIV I'm worried about...

• I have two DIVs, one which will hold the image, the other will hold the links below it. The top DIV has a height of 70% and second 30%.
• The image in the 70% height top DIV should stretch to at least fill the DIV. By this I mean there should be no white space around the image, but obviously the image needs to maintain its aspect ratio also.
• If possible, I'd like a few images to be able to rotate in this DIV with a simple fade effect, possibly being loaded from an XML file (but not necessarily).

Is this over my head or is it easily done?

Thanks for any help you can give.

Answer 1

html

<div id="first">
    <img src="http://api.ning.com/files/HX-j3*PqLLSnezU7hpKPxnpTBF6CprX1BsCZ7AQZDuA2gNOgBgOr6md3zvtnmRxULlNmSpzuh49ycB3VNqtSifGoE3TzUAyS/aishwaryaraiface.jpg">
</div>

css

html,body {height:100%}
#first {height:70%;overflow:hidden;}
img {width:100%}

Demo: http://jsfiddle.net/wMvh6/

The idea is to use img tag, and make its width 100%. It will keep the aspect ratio and will fill the whole width of the parent div.

Answer 2

You could also use the CSS background-size and background-position properties, without having to write a single line of jQuery. Like so:

#first {
    background-image: url('URL-to-image');
    background-size: cover;
    background-position: center;
}

This would ensure the image fills the #first div.