Bug or error on my part when using linear-gradient.

[magink]

Description

I want to add a linear-gradient to my background-image but whenever i do, Blur-up stops working as it should and instead show the tiny tiny thumbnails like this https://imgur.com/a/x6GPraU

Once the image is loaded it looks good but the preview is out of order.

Steps to reproduce

When I add this line to my css

background: linear-gradient(0deg, #ffffff44 30%, #e8d4b488 100%);

Rest of my css class

width: 100%;
height:250px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

Expected result

The image should get a gradient and Blur-up should be working as before I added the line, showing a low-res version of the image until high-res is loaded.

Actual result

Tiny repeating thumbnails.

https://imgur.com/a/x6GPraU

Environment

CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor System: Binaries: Node: 15.6.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.5.4 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 88.0.4324.190 Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81) npmPackages: gatsby: ^2.26.1 => 2.32.3 gatsby-awesome-pagination: ^0.3.6 => 0.3.6 gatsby-background-image: ^1.4.1 => 1.4.1 gatsby-image: ^2.11.0 => 2.11.0 gatsby-plugin-manifest: ^2.12.0 => 2.12.0 gatsby-plugin-netlify: ^2.11.0 => 2.11.0 gatsby-plugin-netlify-cms: ^4.10.0 => 4.10.0 gatsby-plugin-offline: ^3.10.1 => 3.10.1 gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0 gatsby-plugin-sass: ^3.2.0 => 3.2.0 gatsby-plugin-sharp: ^2.14.1 => 2.14.1 gatsby-source-filesystem: ^2.11.0 => 2.11.0 gatsby-transformer-remark: ^2.16.0 => 2.16.0 gatsby-transformer-sharp: ^2.12.0 => 2.12.0 npmGlobalPackages: gatsby-cli: 2.19.2

[timhagn]

Hi @magink,

have a look here in the README on how to use it with multiple images, including gradients.

Best,

Tim.

[magink]

Hi @magink,

have a look here in the README on how to use it with multiple images, including gradients.

Best,

Tim.

This this mean I have to use styled components for it to work? I'm using css modules in my project since I prefer to keep styling separate from the js, but referencing my module class with the linear-gradient only makes the image disappear.

[timhagn]

No you don't have to use styled-components, but you have to use mutliple backgrounds for it, so please read up on them. Of course the image gets replaced when you replace it in your CSS ; ).