Fluid background image on browser resize

Question

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

score 4 · Accepted Answer · answered Jun 17 '11 at 11:02

4

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.

answered Jun 17 '11 at 11:02

easwee

15,757
24
60
83

score 3 · Answer 2 · answered Jun 17 '11 at 11:03

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/

score 0 · Answer 3 · edited Apr 03 '14 at 16:49

0

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.

edited Apr 03 '14 at 16:49

Beryllium

12,808
10
56
86

answered Apr 03 '14 at 16:32

Chris

1

score 0 · Answer 4 · answered Jun 17 '11 at 10:59

0

do a css styling

background-position: center center;

other options are

center top
center bottom
left top

etc...

answered Jun 17 '11 at 10:59

Boopathi Rajaa

4,659
2
31
53

score 0 · Answer 5 · answered Jun 17 '11 at 11:06

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";
}

Fluid background image on browser resize

5 Answers5