Gatsby Image & Sharp `background` blur-up

[mirshko]

Description

When using fit: CONTAIN background: "#ffffff" on a childImageSharp with the ...GatsbyImageSharpFluid_withWebp fragment the initial blurred base64 image has a black background which changes to the white background with the image loaded.

Steps to reproduce

Using a GraphQL static query, add

childImageSharp {
  fluid(
    maxWidth: 512
    maxHeight: 512
    fit: CONTAIN
    background: "#ffffff"
  ) {
    ...GatsbyImageSharpFluid_withWebp
  }
}

query to your image,

see image blur up from black image to white.

CodeSandbox Example

https://codesandbox.io/s/brave-chaplygin-p7tnw?file=/src/components/image.js

Expected result

Blurred up image should have a white background

Actual result

Blurred up image has a black background in Base64 image

Environment

System: OS: macOS 10.15.5 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.5.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.5 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 83.0.4103.116 Safari: 13.1.1 npmPackages: gatsby: ^2.23.12 => 2.23.12 gatsby-image: ^2.4.9 => 2.4.9 gatsby-plugin-manifest: ^2.4.14 => 2.4.14 gatsby-plugin-postcss: ^2.3.9 => 2.3.9 gatsby-plugin-react-helmet: ^3.3.6 => 3.3.6 gatsby-plugin-sharp: ^2.6.14 => 2.6.14 gatsby-remark-images: ^3.3.17 => 3.3.17 gatsby-remark-normalize-paths: ^1.0.0 => 1.0.0 gatsby-remark-relative-images: ^0.3.0 => 0.3.0 gatsby-source-filesystem: ^2.3.14 => 2.3.14 gatsby-transformer-remark: ^2.8.23 => 2.8.23 gatsby-transformer-sharp: ^2.5.7 => 2.5.7

[polarathene]

I've identified the problem and will resolve this.

[polarathene]

I've appended it as a fix to a related PR that's waiting on review/merge: https://github.com/gatsbyjs/gatsby/pull/24999

It just turned out to be that the option wasn't passed to the base64 sharp method. Alternatively if you want transparency in your base64 images, you can use PNG or WEBP formats instead, the linked PR adds documentation to explain how to do that.