CODEWITHSUNDEEP
cssangular
Lint
Lint

Reputation: 935

How to set the background of particular component in Angular?

I want to change the background color of specific (login) component in my app, but it's working. Here is my html page

.bg {
  background: #1f4037;
  background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);
  background: linear-gradient(to left, #99f2c8, #1f4037);
}
<div class='bg'>
  <div style="margin-top: 60px;">
    <div class="container">
      <div class='row'>
        <div class='col-md-6 mx-auto'>
          <div class='card'>

            <div class='card-header'>
              <div>
                <h4 class='text-center'>Login</h4>

              </div>
            </div>
            <div class='card-body'>
              <form class='form'>
                <div class='form-group'>
                  <label>Email:</label>
                  <input class='form-control' name='email' [(ngModel)]='user.username' type='email'>
                </div>
                <div class="form-group">
                  <label>Password</label>
                  <input class='form-control' name='password' [(ngModel)]='user.password' type='password'>
                </div>
                <div class="form-group">
                  <button type='button' class='btn btn-success float-right' (click)='loginUser()'>Login</button>
                </div>
                <br>
                <div class="form-group">
                  <div class='text-center'>
                    <a routerLink='/register'>Don't have account ? Sign Up</a><br />
                    <button type='button' class='btn btn-primary' routerLink='/register'>Register</button>
                  </div>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

although the above code works, but it only sets to half of page not the complete page, I've tried changing the height to 100% but it doesn't worked either

Upvotes: 2

Views: 1165

Answers (3)

Pardeep Jain
Pardeep Jain

Reputation: 86790

You need to adjust your container height with 100vh.

vh - This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

By doing so this will fit your content according to the viewport Height of your webpage.

Working Example

Upvotes: 2

G. Siganos
G. Siganos

Reputation: 787

The 

<div class='bg'>

will get the height of it's own inner elements.

You might need to add some paddings for the bg class:

.bg {
  background: #1f4037;
  background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);
  background: linear-gradient(to left, #99f2c8, #1f4037);
  padding: 50px
}

Upvotes: 1

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

Change the height to 100vh 


.bg {
  background: #1f4037;
  background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);
  background: linear-gradient(to left, #99f2c8, #1f4037);
  height : 100vh;
}

Upvotes: 1

Related Questions