How To Create Effect Of Divs Floating Over Image With Css And Js/jquery?

How do I create the effect of divs or sections of pages floating (for lack of a better description) over images? The effects I'm interested in are showcased here: http://www.thed

Solution 1:

Put background on div like this, here's a Fiddle

---

HTML

<divclass="wrapper"><divclass="innerdiv"></div></div>

CSS

.wrapper {
  position: relative;
  background: url(../images/myimage.png) center no-repeat;
  z-index: 1;
}
.innerdiv {
  position: absolute;
  top: 300px;
  left: 300px;
  z-index: 100;
}

Solution 2:

Actually you can see what they did by doing inspection on the page, but to directly answer your question, they are using a framework for the most part, however they did some extra stuff.

They are using Twitter Bootstrap for their layout. Below is a very rough copy of what they did.

http://jsbin.com/EjeDiPI/1/