Back Ground Images

Search…

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;

Stylesheets - Previous

Colors

Next - Stylesheets

Margin & Paddings

Last modified 2yr ago

Copy link

Outline

Update Path in Variable SCSS file

Update Background Images name