Full page background images
We all know the great post by Chris Coyier about scaling background images to the dimensions of your browser.
That is very neat and all, but you will definitely encounter performance issues when using them: very very poor scroll performance in mainly the Mac versions of Google Chrome. And as it seems, this will remain a bug for some time according to the issue tracker of Chromium.
So, let's go ahead and do it the classic way.
background: url(images/bg.jpg) no-repeat center center fixed;
When applied to the
html tag, this will kick in a nice full page background image, but also a very laggy scroll experience as mentioned before. To be precise: a merely 6 frames per second.
Just apply the following style to the
html tag and behold an improvement of 600% in frame rate.
A whopping 38 frames per second! Smooth as we like it.