// // background.scss //
// Fixed at the bottom
.bg-fixed-bottom {
background-repeat: no-repeat; background-position: right bottom; background-size: 100% auto; background-attachment: fixed;
}
// Calculate the width of the main container because // the background-attachment property will use 100vw instead
.navbar-vertical~.main-content.bg-fixed-bottom {
background-size: 100%; @include media-breakpoint-up(md) { background-size: calc(100% - #{$navbar-vertical-width}); }
}
// Cover
.bg-cover {
background-repeat: no-repeat; background-position: center center; background-size: cover;
}
// Auth
.bg-auth {
background-color: $auth-bg;
}
// Ellipses
@each $color, $value in $theme-colors {
.bg-ellipses.bg-#{$color} { background-color: transparent !important; background-repeat: no-repeat; background-image: radial-gradient(#{$value}, #{$value} 70%, transparent 70.1%); background-size: 200% 150%; background-position: center bottom; }
}
// Hero
.bg-hero {
background-image: linear-gradient(to bottom, fade-out($black, .15), fade-out($black, .15)), url(#{$path-to-img}/covers/header-cover.jpg); background-repeat: no-repeat, no-repeat; background-position: center center, center center; background-size: cover, cover;
}
// Colors
.bg-lighter {
background-color: $nft-soft-lighter !important;
}
// Soft colors
@each $color, $value in $theme-colors {
.bg-#{$color}-soft { background-color: theme-color-level($color, $bg-soft-level) !important; }
}