CODEWITHSUNDEEP
cssangularurlbackground-image
Tommy
Tommy

Reputation: 719

How to set background image for Angular component?

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):

enter image description here

Upvotes: 4

Views: 19881

Answers (5)

Ajith D
Ajith D

Reputation: 23

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');
  }

Upvotes: 0

killnotation
killnotation

Reputation: 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%;
}

Upvotes: -1

Obed Amoasi
Obed Amoasi

Reputation: 2049

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

Upvotes: 1

Q.Z
Q.Z

Reputation: 195

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.

Upvotes: 0

Obed Amoasi
Obed Amoasi

Reputation: 2049

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.

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

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

Upvotes: 5

Related Questions