A quick example repo for gatsby-background-image
to demonstrate what it can do and it's similarities & differences to gatsby-image.
gbitest is based on gatsby-starter-default
sprinkled with styled-components and the
small but practical styled-media-query.
And last but not least, of course gatsby-background-image is part of the crew ; ).
Simple clone this repo and run yarn to install.
yarn develop gives you a working localhost server.
On the left side you see content wrapped by <BackgroundImage /> from gatsby-background-image,
on the right (for comparison) a pure gatsby-image.
Feel free to play around with the BackgroundSection in src/components/index.js.
There are also included examples on how to target the pseudo-elements in the mentioned file as well as at the end of the CSS-file src/components/layout.css.