CODEWITHSUNDEEP
htmlcss
David542
David542

Reputation: 110572

Background image full width, limited height

I want to achieve a background-image effect, similar to on http://yipit.com/.

Here is what I currently have:

<div id="landing-header">
    <img class="landing-background" src="{{ STATIC_URL }}images/new/landing-background.jpg"/>
</div>

#landing-header {
    height: 489px;
}
.landing-background {
    height: auto;
    min-width: 1460px;
    width: 100%;
    position: fixed;
    left: 0;
}

What I want to accomplish is that the horizontal width is always as wide as the browser and the image scales accordingly. For example, if it is a 500x200 image and the browser is 1000px wide, the image would scale to 1000x400. This is working.

However, I only want the container to be 400 px high. In other words, I want to cut off the image at 400px. For example, the image in a 2000px browser width would be 2000x800, but only the top 400px would show. How would I accomplisht this?

Note that I only want the image to resize when the width of the browser is larger than the width of the image, I don't want the image to resize every single time the browser is changed.

Upvotes: 0

Views: 10450

Answers (1)

Shailender Arora
Shailender Arora

Reputation: 7788

hi you can achieve your desired results through CSS3 Property background-size:cover;

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

see the demo :- http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

UPDATED

see the updated demo its a very small image rather than the width of browser so its covering the whole background :- http://tinkerbin.com/CraP8wBh

Upvotes: 2

Related Questions