Question 411086 in Html Question posted in
Some basic documentation can be found here.

Html – How to get a background color to fill the entire page

I’m trying to practice building a website using Angular and I’m trying to fill the background with a color gradient. However, when I set the css to fill the background it only goes up till the div container. How do I get the entire page to fill with the gradient in under the html style tag.

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tutorial3</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html:


<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="card bg-custom-1">
        <div class="card-body">
          <h2 class="card-title text-left text-white py-3">Tutorial3</h2>
          <ul class="text-left list-inline py-3">
            <li class="list-inline-item">
              <a routerLink="/games" class="btn btn-info">List</a>
                </li>
          </ul>
        </div>
      </div>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

styles.css:


html{
    height:100vh;
    background-image: linear-gradient(rgb(60,43,91), rgb(153,39,77));
    background-repeat: no-repeat;
    background-size:100%;
}

app.component.css:

.bg-custom-1{
    background-image: linear-gradient(rgba(46,37,56,1),rgba(46,37,56,0.75))
}

website:
enter image description here

I tried placing the gradient on the html and a separate gradient on the div so that it would blend in, but the space around the header is just white.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I fiddled with changing the styles.css by changing the gradient from html to body and it turns out I have to put the same settings to both body and html.

    html{
    height:100%;
    width:100%;
    background-image: linear-gradient(rgb(60,43,91), rgb(153,39,77));
    background-repeat: no-repeat;
    background-size:100%;  
}
body{
    height:100%;
    background-image: linear-gradient(rgb(60,43,91), rgb(153,39,77));
}

  2. 0

    in styles.css, try replacing height:100vh with height:100% and also add width:100% to it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search