vuetify/src/stylus/components/_parallax.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

.parallax
  position: relative
  overflow: hidden
  z-index: 0

  &__image-container
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    z-index: 1
    contain: strict

  &__image
    position: absolute
    bottom: 0
    left: 50%
    min-width: 100%
    min-height: 100%
    display: none
    transform: translate(-50%, 0)
    will-change: transform
    transition: .3s opacity $transition.swing
    z-index: 1

  &__content
    color: #FFFFFF
    height: 100%
    z-index: 2
    position: relative
    display: flex
    flex-direction: column
    justify-content: center
    padding: 0 1rem