Bu teknik Chris Coyier‘in web sitesinden alınmıştır.

Demo  Kaynak Dosyalarını İndir

Bu uygulama sabitlenmiş (fixed) arkaplan kullanımı için uygundur.

İşin püf noktası ise iki arkaplan (background) resmi kullanmak. Orijinal resmi body elemanının arkaplanı, bulanık renkli resmi ise içerik kapsayıcı alanın arkaplanı olarak belirlemek bizi amacımıza ulaştırıyor.  Görüntü kaymalarını önlemek, iki resmi aynı konumda tutmak için de background-attachment özelliğini fixed olarak  belirliyoruz.

Özetle, yazmamız gereken kod aşağıdaki gibi:

body	 {
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap {
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}

NOT: Kaynak kodları indirip  index.html’i çalıştırdığınızda tarayıcınıza bağlı olarak yuvarlak köşe elemanlarını göremeyebilirsiniz, sebebi  “-moz-border-radius: 30px; -webkit-border-radius: 30px; ” kullanımı ile bu köşelerin oluşturulmasıdır.