Background image
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-img to 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-img class. |
.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-light instead 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>