CODEWITHSUNDEEP
htmlcssangular
Zinox
Zinox

Reputation: 533

How to give an angular 8 component body a background-color?

How can I change the body background-color for this component? I am using angular 8. 

<div class="container-fluid home-container">
<div class="row">
<div class="col">
  <div class="home-login-shape-container">
    <div class="home-login-shape-bg mx-auto">
      <div class="home-login-container d-flex flex-column justify-content- 
           center align-items-center">
      </div>
    </div>
  </div>
</div>
 </div>
</div>

html, body {
min-height: 100%;
background: green;
}


.home-container {
color: var(--col-pale);
 min-height: 100%;
 height: 100%;
 font-family: "roboto-reg";
 overflow-y: hidden;
 background-color: red;
}

.home-login-shape-bg {
 background-image: 
 url("../../assets/images/ui/shape_login_dt_1024x682.png");
 background-repeat: no-repeat;
 background-size: contain;
 background-position: center;
 height: 682px;

}

I cant seem to get the background color to change. I can change it for the root element but I specifically want to change the color for a single component

Any help much appreciated.

Upvotes: 1

Views: 6389

Answers (3)

Hussein AbdElaziz
Hussein AbdElaziz

Reputation: 500

move whole component content into main div and you can change style as you need

<div class="main-div">
<div class="container-fluid home-container">
<div class="row">
<div class="col">
  <div class="home-login-shape-container">
    <div class="home-login-shape-bg mx-auto">
      <div class="home-login-container d-flex flex-column justify-content- 
       center align-items-center">
      </div>
    </div>
  </div>
</div>


.main-div { background-color: #09c;}

Upvotes: 0

Zinox
Zinox

Reputation: 533

This fixed it for me

:host {
 display: block;
 background-color: green;
}


.home-container {
color: var(--col-pale);
height: 100vh;
font-family: "roboto-reg";
overflow-y: hidden;
}

@saget Thank you for your help!

Upvotes: 4

gaurav soni
gaurav soni

Reputation: 206

There is CSS property in angular called as host. So in your component's CSS/Scss file, you can do below:-

:host {
      display: block;
      background-color: red;
}

So below code is only applicable to the component which is your host element.

Upvotes: 0

Related Questions