How to set background image for Angular component?

Question

In my angular app I would like to set a background image for a specific view.

To this end, I added the following to the css-file of a component:

body {
       background-image: url("../../../assets/images/backgroundImage.jpg");
   }

However, the background doesn't change.

This the the file path of the file containing the css-code shown above:

angular-app/src/app/users/profile/profile.component.css

... and this is the file path of the background-image:

angular-app/src/assets/images/backgroundImage.jpg

I also tried

body {
       background-image: url("assets/images/backgroundImage.jpg");
   }

... but this resulted in a warning during compilation and didn't work either.

What am I doing wrong?

I gave the root element class "root" and then put the following into the css-file:

.root {
   background-image: url("../../../assets/images/backgroundImage.jpg");
}

... now the background changes but not for the whole vertical length of the screen (the lower part remains white):

If you want it to apply to the body tag, put it in styles.css — user184994
– user184994, Commented Aug 22, 2018 at 16:30
but then it would be applied to all components/views, wouldn't it? ... I want it to be applied to only this specific view — Tommy
– Tommy, Commented Aug 22, 2018 at 16:31
Then you need to apply it to the root tag of that component, i.e. if the first line in your HTML file is <div id="test" /> then you should apply it to #test. When Angular builds the application, it applies something called ViewEncapsulation, so the CSS in your component CSS file will (usually) only apply to the HTML in that particular component — user184994
– user184994, Commented Aug 22, 2018 at 16:33
That you ... now the background is visible ... but only for parts of the screen (see update to my post) — Tommy
– Tommy, Commented Aug 22, 2018 at 17:21
for not filling whole screen add this html, body { margin: 0; height: 100%; } — Obed Amoasi
– Obed Amoasi, Commented Aug 22, 2018 at 17:26

Obed Amoasi · Accepted Answer · 2018-08-22 17:10:52Z

5

According to Angular, The styles specified in @Component metadata apply only within the template of that component.

you can use a hack like this

In your styless.css file add this

.selector {
       background-image: url("../../../assets/images/backgroundImage.jpg");
   }

now in your component you can do this

ngOnInit() {
    document.body.className = "selector";
  }

ngOnDestroy(){
    document.body.className="";
  }

But this is highly not recommended, i dont know what your code looks like, but there must be another way.

Scale your component to fit whole view-port
set the background on your component

I will work on a plunker and link to this file as an edit when done

answered Aug 22, 2018 at 17:10

Obed Amoasi

2,0491 gold badge21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tommy Over a year ago

thank you fro your answer ... unfortunately, the url can't be resolved any more when I put the .selector into the styles.css file ... (I also tried using 'background-image: url("./assets/images/backgroundImage.jpg");' but that didn't work either

Obed Amoasi · Accepted Answer · 2018-08-22 17:22:35Z

1

I will add another answer for this because its totaly different from my previous answer

in your component import ViewEncapsulation from angular/core

import { ..., ViewEncapsulation } from '@angular/core';

In your @component metatag add encapsulation: ViewEncapsulation.None,

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})

This has a side effect though, all styles in your component will be available to all other components once it loads.

You can check more about it on the Angular page

answered Aug 22, 2018 at 17:22

Obed Amoasi

2,0491 gold badge21 silver badges28 bronze badges

1 Comment

Tommy Over a year ago

this makes the background-image disappear completely (except for small socket at the bottom of the screen)

Q.Z · Accepted Answer · 2018-08-22 17:12:27Z

0

You probably need to either create a service or use ngrx to communicate between the child component and app.component to switch the style of the app.component.html using ngClass.

answered Aug 22, 2018 at 17:12

Q.Z

1951 silver badge2 bronze badges

Comments

Ajith D · Accepted Answer · 2023-10-02 12:20:21Z

0

This Works for me,

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background', 'url("../../../assets/images/form-bg.png")');
    this.renderer.setStyle(document.body, 'background-size', 'cover');
    this.renderer.setStyle(document.body, 'background-repeat', 'no-repeat');
    this.renderer.setStyle(document.body, 'background-attachment', 'fixed');
  }

edited Oct 2, 2023 at 12:20

answered Oct 1, 2023 at 11:46

Ajith D

327 bronze badges

1 Comment

Eliseo Over a year ago

nop the url is not related your tree of directories, You always need think that in product you have: index.html, styles.css and assets folder in a "root". Generally work ./assets

killnotation · Accepted Answer · 2023-03-22 08:43:25Z

-1

I had the same problem in my Component. I solved this by putting the css code down in styles.css i div taged the whole body

.background-IMG {
  background-image: url(../src/app/components/login/images/bg.jpg);
  width: 100%;
  height: 100%;
}

answered Mar 22, 2023 at 8:43

killnotation

11 bronze badge

Collectives™ on Stack Overflow

How to set background image for Angular component?

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related