Using Gatsby Image

Background Color

With the Background Color technique, you can specify a CSS background color to fill the space as your images download. For graphic images with a predominant color in the foreground or background, a matching color in the loading space can create a visually pleasing image load experience.

To use the Background Color technique, provide a backgroundColor prop in your floating or fixed image component instance. You can use hex color values, RGB values, or any other valid CSS background color format.

Documentation & related links

• See the gatsby-image project README for documentation on using the plugin
• Read the docs:
  Using gatsby-image to prevent image bloat
  Using fragments in gatsby-plugin-sharp
• View the gatsby-transformer-sharp example at image-processing.gatsbyjs.org