How to set Angular 4 background image

Question

I am trying the following lines to set the background image but it not works  what are the way set background image in constantly in my application   app component html   lt div  ngStyle     background     url   images trls jpg     gt       lt router-outlet gt  lt  router-outlet gt       lt alert gt  lt  alert gt   lt  div gt

User · Answer

This works for me    put this in your markup    lt div class  panel panel-default   ngStyle     background-image   getUrl     gt    then in component   getUrl       return  url  http   estringsoftware com wp-content uploads 2017 07 estring-header-lowsat jpg

User · Answer

In Html   lt div  style background   background  gt  lt  div gt    In Typescript   this background   this sanitization bypassSecurityTrustStyle  url   this section backgroundSrc   no-repeat      A working solution    What is the recommended way to dynamically set background image in Angular 4

User · Answer

Below answer worked for angular 4 5   In app component css   image       height 40em  background-size cover  width auto       background-image url  copied image address         background-position 50  50          Also in app component html simply add as below   lt div class  image  gt  Your content  lt  div gt    This way I was able to set background image in Angular 4 5

User · Answer

this one is working for me also for internet explorer    lt div class  col imagebox   ngStyle   bkUrl  gt  lt  div gt          Input   background    571x450img     bkUrl          ngOnInit         this bkUrl   this getBkUrl        getBkUrl         const styles            background-image    url src assets images     this background     jpg              console log styles       return styles

User · Answer

I wanted a profile picture of size 96x96 with data from api  The following solution worked for me in project Angular 7    ts      Input   profile     html     lt span class  avatar   ngStyle     background-image    url    profile  public picture        gt  lt  span gt     scss     avatar         border-radius  100         background-size  cover        background-position  center center        background-repeat  no-repeat        width  96px        height  96px          Please note that if you write background instead of  background-image  in  ngStyle   the styles you write  even in style of element  for other background properties like background-position size  etc  won t work  Because you will already fix it s properties with background   url   property     no providers for size  position  etc       The  ngStyle  priority is higher than style of element  In background here  only url   property will work  Be sure to use  background-image  instead of  background in case you want to write more properties to background image

User · Answer

You can use ngStyle to set background for a div  lt div  ngStyle   quot  background-image   url   images     trls img        quot  gt  lt  div gt   or you can also use built in background style   lt div  style background-image   quot  url  images     trls img       quot  gt  lt  div gt

User · Answer

If you plan using background images a lot throughout your project you may find it useful to create a really simple custom pipe that will create the url for you   import   Pipe  PipeTransform   from   angular core     Pipe     name   asUrl     export class BackgroundUrlPipe implements PipeTransform      transform value  string   string       return  url   images   value              Then you can add background images without all the string concatenation    lt div  ngStyle     background  trls img   asUrl    gt  lt  div gt

[javascript] How to set Angular 4 background image?

Examples related to javascript

Examples related to angular