CODEWITHSUNDEEP
javascriptcssimagecrop
towin_
towin_

Reputation: 13

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..?

Upvotes: 1

Views: 562

Answers (2)

coma
coma

Reputation: 16649

@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.

Upvotes: 0

APAD1
APAD1

Reputation: 13666

It's pure CSS, it uses background-size, not supported in IE8 and lower:

background: url(path/to/image.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Can I Use

Upvotes: 1

Related Questions