# Back Ground Images

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

```css
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.

```css
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.

```css
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;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift-angular.g-axon.work/stylesheets/back-ground-images.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.