CSS background-attachment and size

540 Views Asked by At

I am trying to make my image scroll with page inside its container, but not make it fixed (I need it do go up and down with scrolling, to put it that way :)). I already know that setting the image as a background and setting the background-attachment to fixed should work. Something like this:

example{
  width: 100%;
  height: 22.312%;
  background-image: url("img/eyepoker.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

First of all - it doesn't produce the effect google has promised me it will. Any suggestions? Secondly, can someone tell me if this is the best practice regarding fitting background image to its container and achieving this effect at all?

[EDIT]: To be as specific as I can be: the problem is that NOTHING HAPPENS. It is like I never added a background-attachment rule.

1

There are 1 best solutions below

6
On BEST ANSWER

I suggest using background-size: cover;

#example {
    width: 100%;
    height: 22.312%;
    min-width: 120px;
    min-height: 80px;
    background-image: url("http://lorempixel.com/1200/800/nature");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 400px 0;
}

http://jsfiddle.net/0r61obph/