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
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;
Last modified 3yr ago