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 …

Improving Perceived Performance with Multiple Background Images is a post from CSS-Tricks