Drift Angular
Search…
Installation and Setup
Stylesheets
Settings
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
1
src / scss / layouts / {layout} / themes / {theme} / _variables.scss
2
​
3
//Image path
4
$image-path: '../../images' !default;
5
// Above path represent: src/assets/images
6
// After compiling scss, css files save at src/assets/css/{layout}
Copied!
Update Background Images name
To update background images go to following file and update the images name as you need.
1
src / scss / core / globals / _bg-images.scss
2
​
3
.bg {
4
&-image-v1 {
5
@include background-img('#{$image_path}/bg-images/bg-image.jpg', center center);
6
}
7
​
8
&-image-v2 {
9
@include background-img('#{$image_path}/bg-images/bg-image-1.jpg', center center);
10
}
11
​
12
&-image-v3 {
13
@include background-img('#{$image_path}/bg-images/bg-image-2.jpg', center center);
14
}
15
​
16
&-image-v4 {
17
@include background-img('#{$image_path}/bg-images/bg-image-3.jpg', center center);
18
}
19
​
20
&-image-v5 {
21
@include background-img('#{$image_path}/bg-images/bg-image-4.jpg', center center);
22
}
23
​
24
&-image-v6 {
25
@include background-img('#{$image_path}/bg-images/bg-image-5.jpg', center center);
26
}
27
​
28
&-image-v7 {
29
@include background-img('#{$image_path}/bg-images/bg-image-6.jpg', center center);
30
}
31
}
Copied!
To update login, signup and lock screen pages images go to following file and update the image name.
1
src / scss / core / pages / _login.scss
2
​
3
//Login Style
4
&__bg-section {
5
position: relative;
6
padding: $dt-card-padding-y $dt-card-padding-x;
7
@include background-img('#{$image_path}/bg-images/login-image.jpg', center bottom);
8
color: $white;
9
display: flex;
10
flex-direction: column;
11
12
//Lock Screen
13
.#{$class-prefix}-lock-screen {
14
@include background-img('#{$image_path}/bg-images/bg-image-1.jpg', center center);
15
text-align: center;
Copied!
Last modified 2yr ago
Copy link