背景画像をフェードインさせる方法

Question

cssでbodyに設定した背景画像を、サイト訪問時にフェードインさせることはできるでしょうか。

具体的には

body {
background-image: url(画像のリンク);
}

とし、bodyに対して

$(document).ready(
function(){
$('body').fadeIn(3000);
}
);

としてみましたが、フェードイン表示されませんでした。

HTMLにimgタグで背景画像を入れると、上記と同じ方法でフェードインさせることはできたのですが、cssでbody全体に背景を設定した場合にどうすればいいのか教えて欲しいです。

Answer 1

#bg {
	display:none;
    z-index: -1;
    position:fixed;
}

$(document).ready(function(){
jQuery("#bg").delay(1000).fadeIn(1000);
});

こういうのはだめですか？

Answer 2

一旦非表示にしておいたらどうでしょうか？試してもいません。

body {
  background-image: url(画像のリンク);
  display: none;
}