/**
|
|
* component: hero
|
|
*
|
|
* background-size is as default: cover - Resize the background image to cover the entire container
|
|
*
|
|
* <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
|
|
*
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://github.com/tentakelfabrik/crispy-css
|
|
*
|
|
*/
|
|
|
|
@mixin crispy__hero() {
|
|
.hero {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
|
|
&--top {
|
|
background-position: top center;
|
|
}
|
|
|
|
&--bottom {
|
|
background-position: bottom center;
|
|
}
|
|
|
|
&--contain {
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|