This is a ReactJS component that generates a base
Simply install as a dependency in your React application
- Create a new React application
- Navigate into your directory
- Run the following command:
npm install react-sky-bg
Import this component into the file that controls your layout. You can then place this component as the wrapper around the rest of your application, and it will render a background div with z-index: -1. The stars are rendered as an absolutely positioned canvas element, so they will only appear in the initial viewport that is rendered.
Here's a simple example:
;;;;<Background><Header />/* This is the main pane/content section */<div>children</div><Footer /></Background>;
As a note, for the stars to not interfere or overlap other components, they will need to use a CSS position that puts them in the same stacking context. You can read more about stacking context here.