CSS 背景附件和大小

Question

我正在尝试让我的图像随着容器内的页面滚动，而不是固定（我需要它随着滚动上下移动，这样说:)）。我已经知道将图像设置为背景并将背景附件设置为固定应该可行。像这样：

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

首先 - 它不会产生 google 向我承诺的效果。有什么建议么？其次，有人能告诉我这是否是将背景图像与其容器相匹配并实现这种效果的最佳做法吗？

[编辑]：尽可能具体：问题是什么都没有发生。好像我从来没有添加背景附件规则。

Answer 1

我建议使用 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/

CSS 背景附件和大小

CSS background-attachment and size

html

css

background-image

background-attachment