Фон с Webkit

Question

Какой правильный код позволяет применять анимацию веб-набора ко всему фоновому изображению (не к содержимому)?

EX:

body {
    background-color: #FFF;
    background-image: url(bgsuper.jpg);
    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

Спасибо!

Answer 1

Я бы взломал псевдо-фон:

<img id="pseudo-background" src="..." alt="You need me" />

Работает как обычный фон, но не тайл. Если вам нужна мозаика, создайте <div> со свойством background и работайте с этим.

HTML

<img src="..." id="pseudo-background" alt="foo" />

I work, see!

CSS

@-webkit-keyframes animate {
from {
-webkit-transform: ease-in-out(0);
opacity: 0;
}
to {
-webkit-transform: ease-in-out(1);
opacity: 1;
} }

#pseudo-background {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -10;

    -webkit-animation-name: animate;
    -webkit-animation-duration: 1.333s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;

}

И, демо: http://jsfiddle.net/4z6TS/3/