CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
mcan
mcan

Reputation: 2082

Full fitting background image without expanding

Here is a demo. I want to get full fit the background image withouth streching. Because when i resize window image will be distorted. If i change the css with 

position: absolute;
width: 100%;
height: 100%;
background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
background-repeat:no-repeat;

image doesn't strech anymore but then image will be enormously big. How can set the background image properly? I will appreciate for any help.

Upvotes: 0

Views: 719

Answers (1)

yckart
yckart

Reputation: 33438

You can use the background-size-property cover for this:

#homee {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("http://farm9.staticflickr.com/8100/8601158004_173413335e_k.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

http://jsfiddle.net/G2Rhq/4/

Update

If you've to support oldIE try my super-simple jquery plugin for this:

https://github.com/yckart/jquery.fitpic.js

Upvotes: 3

Related Questions