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
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}
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;