Fluid background image on browser resize

I want to achieve the fluid background image effect that you can see in this webpage: http://217.116.9.130/test2.html (taken from zara.com)

If you resize your browser to the left the woman in the image goes left with your resizing. I've taken the code from zara.com but I suspect the effect is done by a language I don't know.

Does anyone know and can give 开发者_开发技巧a clue (or hand me a link) on how to do it using jquery, css, ajax or php?

Thanks a lot

You are probably looking for this: http://css-tricks.com/perfect-full-page-background-image/

It's quite simple to implement so no additional comments needed.

you can use css3 cover property. for it

.container{
        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;
}

for check this link http://css-tricks.com/perfect-full-page-background-image/

do a css styling

background-position: center center;

other options are

center top
center bottom
left top

etc...

There is just an onResize method used in Javascript so that when the browser changes then that changes the CSS for the background image's position.

Give the image an id: id="fullImage"

They then use javascript to manipulate the left:; css style.

As you resize left changes up and down.

This should do it:

var el = document.getElementById(fullImage),
width = window.innerWidth,
imageWidth = [width of image here];
window.onresize = function() {
  el.style.left = imageWidth - width + "px";
}

For example, if your background image is contained in your body tag, then the CSS should contain the background image assignment and then include:

top: 0;
bottom: 0;
left: 0;
right: 0;

This way - when the window resizes - the background immediately changes with it. Same principle for providing an overlay for a modal dialog.