How to add a background image in Angular 2 Component?

Question

I have an Angular 2 app. In this app i have few components. I want to add a background image only to login component. How do i do that?

body{
    background-image: url('https://s.zkcdn.net/Advertisers/d36ea4926dfa4978ab2556ba7688692c.png') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height:100%;

}

I have this style for the login component. but it's not covering the entire windows. it's covering only the form section.

Stack Overflow is not a free code writing service. You are expected to try to write the code yourself. After doing more research if you have a problem you can post what you've tried with a clear explanation of what isn't working and providing a minimal reproducible example. I suggest reading How to Ask a good question and the perfect question. Also, be sure to take the tour. — Igor
– Igor, Commented Jul 26, 2017 at 14:07

Louise Davies · Accepted Answer · 2017-11-30 14:02:24Z

15

I faced the same problem.But below code works good for me.

Add a following css code in global css file (style.css).

.bg-img
{
    background-image: url('/assets/images/back.jpg');
    background-position: center;
    background-repeat: no-repeat; 
}

and add the below code in ngOnInit section in required component.ts file.(ex:login.component.ts)

ngOnInit() {
    document.body.classList.add('bg-img');
}

edited Nov 30, 2017 at 14:02

Louise Davies

16.2k6 gold badges41 silver badges42 bronze badges

answered Nov 30, 2017 at 12:55

Karthikeyan Vellingiri

1,3302 gold badges20 silver badges28 bronze badges

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

6 Comments

franpen Over a year ago

This works, but somehow whenever I change the component, the background gets stuck until i refresh the page. Is there any solution to this?

Suhel Over a year ago

You can remove the class on ngOnDestroy lifecyle-hook then it will not stuck whenever you change your component

Mr. Wizard Over a year ago

@franpen or you can in component1: document.body.classList.remove('bg-img-login'); document.body.classList.add('bg-img-register'); and in component2: document.body.classList.remove('bg-img-register'); document.body.classList.add('bg-img-login'); And ofc, in parent component you have to remove both of them.

Mr. Wizard Over a year ago

Mmm, but then you will have to remove it in every other component, which is not very practical.

franpen Over a year ago

@Mr.Wizard that’s the issue, I haven’t found a practical solution to this. Nevertheless, I’ll test your idea when I get home

|

Bashir Saidi Wamula · Accepted Answer · 2020-01-07 11:10:59Z

3

I am using angular 7. This is how I achieved full background image in a component. in login.component.html

<div class="bg-img">

 </div>

then in the login.comonent.css

.bg-img{
 min-height: 100vh;
width: 100%;
background: url('../../../src/assets/loginimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

edited Jan 7, 2020 at 11:10

answered Dec 11, 2019 at 8:25

Bashir Saidi Wamula

1371 silver badge8 bronze badges

Comments

Herr Derb · Accepted Answer · 2017-07-26 14:21:32Z

0

In the @Component decorator of your login component, you can add a styleUrls field. Doing so will allow you to use a style sheet for your login component only.

@Component({
  selector: 'your-selector'
  templateUrl: ['path/to/your/html/component'],
  styleUrls: ['path/to/your/stylesheet'],
})

You can then, in your style sheet, change your background only for the login component

edited Jul 26, 2017 at 14:21

Herr Derb

5,5675 gold badges43 silver badges77 bronze badges

answered Jul 26, 2017 at 14:12

tom

7405 silver badges20 bronze badges

3 Comments

RohanG Over a year ago

body{ background-image: url('s.zkcdn.net/Advertisers/…) ; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; height:100%; }

RohanG Over a year ago

I have this style for the login component. but it's not covering the entire windows. it's covering only the form section.

tom Over a year ago

You could try to add a div encapsulating your body and set the background of this div. Not sure why you have this result, check how your components are one in another

Jean-François Fabre · Accepted Answer · 2019-05-15 21:20:31Z

0

I am using Ionic 3. But Ionic uses Angular.

In my login.html page I have this:

<ion-content class="background">
 ...
</ion-content>

I think you can try with a:

<body class="background">
</body>

And in my login.scss page I have this:

page-login {
    .background {
        // Path of my picture
        background-image: url('../assets/background.gif');
    }
}

Best regards,

edited May 15, 2019 at 21:20

Jean-François Fabre♦

141k24 gold badges179 silver badges246 bronze badges

answered Jul 26, 2017 at 14:25

Manuel GONZALEZ

491 silver badge4 bronze badges

Comments

Todd · Accepted Answer · 2021-06-23 07:38:34Z

0

// in div father

.bg-component {
    background-image: url('../../../assets/images/backgroundweb/[email protected]') !important;
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;
    width: 100%;
    height: 100%;
}

edited Jun 23, 2021 at 7:38

Todd

6922 gold badges22 silver badges39 bronze badges

answered Jun 22, 2021 at 21:52

Adolfo

1

Collectives™ on Stack Overflow

How to add a background image in Angular 2 Component?

5 Answers 5

6 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related