Fluid background image on browser resize

17,503

Solution 1

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.

Solution 2

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/

Share:
17,503
ADM
Author by

ADM

Programming enthusiast, delighted to have been born in this era. At this moment I’m looking to work remotely so I can continue giving the best of my work in the moments of better productivity within the connectivity of team work

Updated on June 04, 2022

Comments

  • ADM
    ADM almost 2 years

    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