Backgroundimage
These classes help you to attach an image to background of an element. Image can be set using inline css and background-image property.
You should apply .bg-imgto your desire element. Then, you can modify the image behavior using following utility classes, or draw an overlay above it.
| Class name | Description |
|---|---|
.bg-fixed | background-attachment: fixed |
.bg-repeat | background-repeat: repeat |
.bg-img-left | background-position: left center |
.bg-img-right | background-position: right center |
<div class="bg-img h-300px" style="background-image: url(path/to/img.jpg)"></div>Overlays
Add a alpha colored layer between your background-image and element text for better contrast.
Elements using a background image can be overlayed with a dark layer by adding the data attribute data-overlay="*", where *is a number between 1 and 9; 1 is lighter layer and 9 is darker layer.
| Class name | Description |
|---|---|
.overlay | Prepare element to accept overlay-*classes. You don't need this class if your element has .bg-imgclass. |
.overlay-dark | Overlay color would be rgba(0,0,0,.35) |
.overlay-darker | Overlay color would be rgba(0,0,0,.50) |
.overlay-darkest | Overlay color would be rgba(0,0,0,.70) |
.overlay-light | Overlay color would be rgba(255,255,255,.55) |
.overlay-lighter | Overlay color would be rgba(255,255,255,.70) |
.overlay-lightest | Overlay color would be rgba(255,255,255,.90) |
A text over the image
<div class="bg-img h-300px" data-overlay="5" style="background-image: url(../assets/img/gallery/1.jpg)"> <h3 class="center-vh text-white">A text over the image</h3></div>You might also need to have a light overlay. For this purpose, use data-overlay-lightinstead of data-overlay.
A text over the image
<div class="bg-img h-300px" data-overlay-light="7" style="background-image: url(../assets/img/gallery/1.jpg)"> <h3 class="center-vh text-dark">A text over the image</h3></div>