Home/ Questions/Q 8189255
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:12:57+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0