2

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.

dzenesiz
  • 1,388
  • 4
  • 27
  • 58
  • 1
    What's not happening as expected? Please update your question to be more specific. – isherwood Jun 26 '15 at 14:57
  • Here's a demo fiddle. Does it demonstrate the problem? http://jsfiddle.net/isherwood/Lfg5pvmb/ – isherwood Jun 26 '15 at 15:00
  • I suspect the solution is simply removing the `background-attachment` rule. http://jsfiddle.net/isherwood/Lfg5pvmb/1/ – isherwood Jun 26 '15 at 15:01
  • @isherwood that is not a problem, but a cool effect. What I wanted to achieve is the background that scrolls as I scroll the page, but the div that contains it should scroll normally and disappear behind browser's address bar. It does absolutely nothing, though. – dzenesiz Jun 26 '15 at 15:24

1 Answers1

1

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/

Richard Fernandez
  • 558
  • 1
  • 6
  • 18
  • This is a great effect and I am glad I learned it too, but I need the whole image to be visible in the div (like a slider image in those wordpress themes, or a "call to action" image) and when I scroll up, the image looks like it is scrolling down, but only inside the div that contains it. The mentioned div should scroll normally... – dzenesiz Jun 26 '15 at 23:44
  • Can you add an example of the effect youre looking for? – Richard Fernandez Jun 27 '15 at 04:13
  • There is one website that I recently saw this effect on, a website of a web design studio actually, but I can't track it back. It was something like this https://developer.mozilla.org/samples/cssref/background-attachment.html but the image appeared to scroll slower than the actual scrolling speed. Maybe it was some js, I dunno... – dzenesiz Jun 27 '15 at 13:42
  • Then is was probably Javascript. – Richard Fernandez Jun 29 '15 at 11:25
  • If it is not a bother, could you please tell me what makes the picture go away in the browser if I remove the min-width and min-height properties? Aren't those just "bottom limiters" to put it that way? – dzenesiz Jun 29 '15 at 17:09
  • It all gets a bit crazy when the #example div container (in this case html and body tags) have no explicit height themselves. If you want to remove the min-height, then is best to make sure the containers deal with height of it's container (in this case, the screen). I do this by making sure html and body tags have 100% height. http://jsfiddle.net/1wkzvs9n/1/ – Richard Fernandez Jun 30 '15 at 10:39