固定拉伸背景图片

Question

I have drafted up a brief example of what I have so far, and what I'm trying to achieve.

See my demo here

In my jsfiddle you will see a wrapping div named "content-wrap". Within this div I want an image that can stretch to window size and content.

I have done background image stretching before: See example here

But this is a bit more complicated because it is for a specific region within the site.

I have tried having a play so far with my existing code from the link above and I think I may need to take a different approach. As when you scroll down the images doesn't stay in position it moves with the scroll bar (as it should).

Any ideas?

Answer 1

If you don't mind using CSS3's background-size property, then the following additions to your #content-wrap { CSS statements will achieve a responsive background image that will expand to fit the size of the container.

#content-wrap {
    height: 1000px;
    background: #ccc;
    color: #fff;

    /* Added CSS */

    display: block;
    max-width: 100%;
    clear: both;
    background: transparent url("http://placekitten.com/900/900") top right no-repeat;
    background-size: cover;
}

Here is an updated version of your jsfiddle with my added CSS and some lovely placekittens: http://jsfiddle.net/kztGj/22/

The downsides to this are of course that it will not work in Internet Explorer < 9, Firefox 3.6, or any browser that doesn't support CSS3. But then your asking for a responsive image, and as such you'll be hard pushed to find an elegant solution that supports older browsers.

For more information on the background-size property and its uses, I recommend checking out this article , its quite informative.

Answer 2

In your image, add a css like this

.custom-image {
    width:100%;
}

and your html

<div>
    <img src="" class="custom-image" />
</div>