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>