HTML CSS Background is not covering page

Question

When I run my code for my HTML and CSS project, I have a background, which I set in the CSS class. This background is constructed in the HTML file. But it does not seem to cover the entire screen for my computer. When I try to edit the height variable, it doesn't change the height of the background, which leaves me clueless.

.gradient{
   width: 100wh;
   height: 90vh;
   color: #fff;
   background: radial-gradient(#EE7752, #CF22E7);
   background-size: 400% 400%;
   -webkit-animation: Gradient 10s ease infinite;
   -moz-animation: Gradient 10s ease infinite;
   animation: Gradient 10s ease infinite;
}

<div class="jumbotron text-center gradient">
    <div class="content">
        <p class="lead" style="color:#FFFFFF"></p>
    </div>
</div>

Possible duplicate of [Stretch and scale CSS background](https://stackoverflow.com/questions/376253/stretch-and-scale-css-background) — Sumithran, Jul 16 '18 at 04:36

score 2 · Answer 1 · answered Jul 16 '18 at 04:38

you can add this one background-size: 300px 100px, cover;

.gradient{
width: 100wh;
height: 90vh;
color: #fff;
background: radial-gradient(#EE7752, #CF22E7);
background-size: 300px 100px, cover !important;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
}

<div class="jumbotron text-center gradient">
    <div class="content">
        <p class="lead" style="color:#FFFFFF"></p>
    </div>
</div>

score 0 · Answer 2 · answered Jul 16 '18 at 04:27

0

you can add background-size:cover to your css instedof background-size:400% 400%

answered Jul 16 '18 at 04:27

Ahmad

73
3
13

score 0 · Answer 3 · answered Jul 16 '18 at 04:35

0

.gradient{
width: 100wh;
height: 90vh;
color: #fff;
background: radial-gradient(#EE7752, #CF22E7);
background-size: cover;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;

}

<div class="jumbotron text-center gradient">
    <div class="content">
        <p class="lead" style="color:#FFFFFF"></p>
    </div>
</div>

answered Jul 16 '18 at 04:35

HTML CSS Hupp Technologies

335
1
6

Please explain what you have done instead of presenting a block of code. The single line of difference can be hard to spot. – Jon P Jul 16 '18 at 04:51
add background-size:cover to .gradient class – HTML CSS Hupp Technologies Jul 16 '18 at 04:54
Please edit your answer to include it there. Comments can be temporary and are often overlooked. – Jon P Jul 16 '18 at 04:57

score 0 · Answer 4 · answered Jul 16 '18 at 06:55

If you just wish to remove the white space around the edges (e.g. cover the entire screen), it is due to the div being contained in the body element which by default has a margin added by the browser.

Try this:

<style>
body {
    margin: 0;
}
.gradient {
    height: 100vh;
    background: radial-gradient(#EE7752, #CF22E7);
    background-size: 400% 400%;
}
</style>

 <div class="jumbotron text-center gradient">
     <div class="content">
         <p class="lead" style="color:#FFFFFF"></p>
     </div>
 </div>

HTML CSS Background is not covering page

4 Answers4