Arkaplan görseline transition nasıl verebilirim?

Merhabalar,

Siteme eklediğim arkaplan görselinin yüklenmesini yavaşlatmak istiyorum. bir anda gelince ve biraz geç gelince hoş olmuyor yavaş gelirse hoş olur diye düşündüm ve aşağıdaki gibi yaptım ama çalışmadı, nasıl yapmam gerekiyor ?

body {
    background-image: url("http://www.bozuktus.com/wp-content/uploads/2015/09/fallout-4-arkaplan.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    -webkit-transition: background-image 0.2s ease-in-out;
	transition: background-image 0.2s ease-in-out;
}

örnek yaptım. http://codepen.io/haykut/pen/KdrJPQ

Hocam harikalar yaratmışsın, bu işlerden anlayan birkaç arkadaş bunun CSS ile yapılmasının mümkün olmadığını söyleyince javascript ile yapmıştım ama boşu boşuna dev gibi bir js dosyası çekmek zorunda kalmıştım. yazdığınız kodlar çok işime yaradı.

Kodlarda birkaç düzenleme isteğim daha olacak.

Maksimum opacity: 0.7; yaptım 1 olduğunda içeriğin belirginliği azaldığı için ancak animasyon bitince otomatik olarak opacity: 1; oluyor bunu css ye nasıl ekleriz.

background-attachment: fixed; komutu da sanırım position: absolute; dan dolayı arkaplanın sabitlenmemesini sağladı.

Site adresim: http://www.bozuktus.com/

ben direk kodunu alıp yapıştırdım. position: fixed; yap, background-attachment: fixed; kaldır. sabitlenir. diğer sorunu anlamadım.

Tamam oldu, diğer sorunum şu. Şimdi biz bunu görsel opacity 0'dan animasyon ile 1,5 saniyede opacity 1'e gelsin şeklinde yaptık ya. ben onu opacity 0 dan opacity 0.7'ge gelsin şeklinde değiştirdim ancak animasyon bitip opacity 0.7 olduğunda tık diye opacity 1 değerine yükseliyor görsel. site üzerinden bir dikkatli bak anlarsın demek istediğimi. onun haricinde herş ey süper.

Görsel: http://prntscr.com/92nmbv

yapmak istediginiz nedir peki?

bu arada kodları dırek kullanmayın. bazı browserlerde desteklemez. bir araştırın. ben direk kodları verdim.