Improving Perceived Performance with Multiple Background Images

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

.masthead {
  /* Might as well let this color show */
  background-color: #3d332b;
  /* As this is loading */
  background-image: url(/img/masthead.jpg);

Harry Roberts levels this up by suggesting using a gradient that looks more like the image that loads:

.masthead {
    linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);

Will Wallace gets even fancier by creating a Sass @mixin that takes a big array of colors to make an complex gradient that looks even more like a blurred version of the original.

See the Pen “Blurground” gradient function by Will (@wiiiiilllllll) on CodePen.

I still the think coolest way to handle it is the “Blur Up” Technique that Emil Bj√∂rklund covered here.

Direct Link →