https://github.com/msaaddev/bgoverlay
A NPM package to add overlay on a background image
https://github.com/msaaddev/bgoverlay
css npm npm-package overlay
Last synced: 4 months ago
JSON representation
A NPM package to add overlay on a background image
- Host: GitHub
- URL: https://github.com/msaaddev/bgoverlay
- Owner: msaaddev
- License: mit
- Created: 2020-02-01T15:44:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-22T08:17:21.000Z (almost 6 years ago)
- Last Synced: 2023-03-06T01:08:17.144Z (over 3 years ago)
- Topics: css, npm, npm-package, overlay
- Language: CSS
- Homepage: https://www.npmjs.com/package/bgoverlay
- Size: 2.11 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖼 Background Overlay
A small package that helps you to add a overlay on a background
## 🚀 How to use
Open the terminal and write
`npm i bgoverlay`
For HTML, add the following link tag in the head section of your HTML.
``
For React, add the following line of code at the top of the file.
`import "./node_modules/bgoverlay/bgoverlay.css"`
Create two parent child divs in the body tag. Give class of *main_div* to the parent div and *overlay* to the child div like this.
```
```
Add any background image and overlay color you want then by writing the following code in the CSS.
```
.main_div {
background-image: url() !important; /* Add image URL */
}
.overlay {
background-color: black; /* Add any color */
}
```
## 🙋♂️ Author
Visit my [Website](https://msaad.dev)
Want to connect with me, follow me on [Twitter](https://twitter.com/msaaddev)