Back Ground Images

Customize background images in your project.

This section details how you could customize background images for your project. Exa: Login, Signup, Lock Screen etc.

There are two steps to change background images:

• Update Path in Variable Scss file

• Update Background Images name

Update Path in Variable SCSS file

src / scss / layouts / {layout} / themes / {theme} / _variables.scss

//Image path
$image-path: '../../images' !default;
// Above path represent: src/assets/images
// After compiling scss, css files save at src/assets/css/{layout}

Update Background Images name

To update background images go to following file and update the images name as you need.

src / scss / core / globals / _bg-images.scss

.bg {
  &-image-v1 {
    @include background-img('#{$image_path}/bg-images/bg-image.jpg', center center);
  }

  &-image-v2 {
    @include background-img('#{$image_path}/bg-images/bg-image-1.jpg', center center);
  }

  &-image-v3 {
    @include background-img('#{$image_path}/bg-images/bg-image-2.jpg', center center);
  }

  &-image-v4 {
    @include background-img('#{$image_path}/bg-images/bg-image-3.jpg', center center);
  }

  &-image-v5 {
    @include background-img('#{$image_path}/bg-images/bg-image-4.jpg', center center);
  }

  &-image-v6 {
    @include background-img('#{$image_path}/bg-images/bg-image-5.jpg', center center);
  }

  &-image-v7 {
    @include background-img('#{$image_path}/bg-images/bg-image-6.jpg', center center);
  }
}

To update login, signup and lock screen pages images go to following file and update the image name.

src / scss / core / pages / _login.scss

//Login Style
&__bg-section {
    position: relative;
    padding: $dt-card-padding-y $dt-card-padding-x;
    @include background-img('#{$image_path}/bg-images/login-image.jpg', center bottom);
    color: $white;
    display: flex;
    flex-direction: column;
    
//Lock Screen
.#{$class-prefix}-lock-screen {
  @include background-img('#{$image_path}/bg-images/bg-image-1.jpg', center center);
  text-align: center;