Improving Perceived Performance with Multiple Background Images

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

.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 {
  background-image: 
    url(/img/masthead-large.jpg),
    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 →