There is a simple and very common technique by using 2 background images: a crisp and a blurry one. You set the crisp image as a background for the body and the blurry one as a background image for your container. The blurry image must be set to fixed positioning and the alignment is 100% perfect. I used it before and it works.
body {
background: url(yourCrispImage.jpg) no-repeat;
}
#container {
background: url(yourBlurryImage.jpg) no-repeat fixed;
}
You can see a working example at the following fiddle: http://jsfiddle.net/jTUjT/5/. Try to resize the browser and see that the alignment never fails.
If only CSS element()
was supported by other browsers other than Mozilla's -moz-element()
you could create great effects. See this demo with Mozilla.