Search code examples
javascriptcssimagecrop

Detect screen height and crop full-size image

there's a very cool and subtle effect I've seen on many sites, mostly used for landing pages. The background-image is set fullsize over the entire screen and gets cropped in height depending on the screen size (or more specifically the screen height).

This example shows what I mean. Just resize the window to see the effect. I don't know what this technique is called and I sure don't know how to code it. Obviously there's Javascript and some kind of overflow:hidden involved.

Any clues..?

Solution

  • @APAD1 is right, so this is an alternative idea for browsers not supporting background-size:

    http://jsfiddle.net/coma/TS64y/

    div {
    position: relative;
    width: 400px;
    height: 50px;
    overflow: hidden;
}

div img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -200px;
    z-index: -1;
}

    Please, stop using js for everything.