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.