Geek Answers Handbook

JQuery <div> background image full size stretch

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

Currently, the site doesn’t work well in search results, obviously because it is Flash, so I'm trying to fix it.

What I'm looking for is quite difficult, but I will be happy to make a decision for any single part, and I will figure out how to put them all together. I searched high and low all over the Internet and urge you to find something close to what I want.

This is what I need. This is basically a DIV image I'm worried about ...

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

Is it over my head or is it easy to do?

Thanks for any help you can give.

+5
source share
2 answers

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/

img width 100%. div.

+8

CSS background-size background-position, jQuery. :

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

, #first div.

+3

More articles:


All Articles