Setting a background image

[gopiannain]

Issue type

I'm submitting a ... (check one with "x")

• [X ] bug report
• [ ] feature request

Issue description

Need to replace color-bg and layout-bg to background image

When i replace color code to URL its gives error . how can i change ?

[nnixaa]

Hi @gopiannain,

just set

layout-bg: url(image/url/image.png),

and it should work.

[gopiannain]

Ok great its works now . my problem i am ngx-admin .

May i know how to use set of commands to layout-bg at one go like below

layout-bg { content: ''; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: nb-theme(url-bg) no-repeat center center; background-size: cover; will-change: transform; z-index : -1; }

Just for others using Ngx-admin and planning to use background image it ll clash with other pages in

team.component.scs line 23 box-shadow: 0 4px 10px 0 rgba(nb-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nb-theme(color-fg-highlight), 0.2);

temperature-dragger.component.scss line 42 background-color: lighten(nb-theme(layout-bg), 2%);

[nnixaa]

Hi @gopiannain, not sure I completely understood the issue. Will you be able to push a reproducible example to https://stackblitz.com/?

[KennBro]

A reproducible example of this issue is to clone ngx-admin starter kit and try to change background color for an image. For example, if I put the line

layout-bg: url(image/url/image.png),

as you suggested in the file ngx-admin/src/app/@theme/styles/themes.scss

$nb-themes: nb-register-theme((
  // app wise variables for each theme
   sidebar-header-gap: 2rem,
   sidebar-header-height: initial,
   layout-content-width: 1400px,
   ...
   layout-bg: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg"),
   ...
   progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
 ), cosmic, cosmic);

The output messages are :

ERROR in ./src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

      background-color: lighten(nb-theme(layout-bg), 2%);
                       ^
      Argument `$color` of `lighten($color, $amount)` must be a color
      in /Users/jdoe/Krypky/dev/ngx-admin/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss (line 43, column 25)
ERROR in ./src/app/pages/dashboard/team/team.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

      box-shadow: 0 4px 10px 0 rgba(nb-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nb-theme(color-fg-highlight), 0.2);
                              ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in /Users/jdoe/Krypky/dev/ngx-admin/src/app/pages/dashboard/team/team.component.scss (line 23, column 32)
ERROR in ./src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background: rgba(nb-theme(layout-bg), 0.6);
               ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in /Users/jdoe/Krypky/dev/ngx-admin/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss (line 23, column 17)
ℹ ｢wdm｣: Failed to compile.

I use blur-admin in a personal project and I want to reproduce the same theme in ngx-admin.

[KennBro]

If I change the lines, where it says layout-bg by color-bg everything works.