Improving Perceived Performance with Multiple Background Images

.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 →