background color full page

Question

My current code seems to make a pattern instead of covering the entire page. How do I make it to cover the entire page instead of a pattern like depiction?

<style>
  body {
    background: linear-gradient(120deg, #211B53, #ECE3E6);
    width: 100%;
    height: 100%;
  }
  
  #para1 {
    text-align: center;
    font-size: 600%;
    color: black;
  }
  
  div.absolute {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
</style>

<p id="para1"> ARTWORK</p>
<div class="absolute"> All sales final. </div>

instead of body height:100% set body min-height:100vh; – Gulam Hussain Jun 24 '19 at 04:35 — Gulam Hussain, Jun 24 '19 at 04:35
or just set 100% height for html – Codesigner Jun 24 '19 at 04:40 — Codesigner, Jun 24 '19 at 04:40

score 2 · Answer 1 · answered Jun 24 '19 at 04:40

When using gradient make sure you use correct css to go along with it

 body {
    background: linear-gradient(120deg, #211B53, #ECE3E6);
    width: 100%;
    min-height:100vh;
    background-size: cover; 
  }
  
  #para1 {
    text-align: center;
    font-size: 600%;
    color: black;
  }
  
  div.absolute {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }

<p id="para1"> ARTWORK</p>
<div class="absolute"> All sales final. </div>

You're good to go!!

score 0 · Answer 2 · answered Jun 24 '19 at 04:40

Instead of setting width and height to 100% on body, instead set them to 100vw and 100vh respectively:

body {
  background: linear-gradient(120deg, #211B53, #ECE3E6);
  width: 100vw;
  height: 100vh;
}

#para1 {
  text-align: center;
  font-size: 600%;
  color: black;
}

div.absolute {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

<p id="para1"> ARTWORK</p>
<div class="absolute"> All sales final. </div>

score 0 · Answer 3 · answered Jun 24 '19 at 04:50

0

I think that all you need to do is change the height value of the body from percentage to viewport height.

height: 100vh;

you can read more about viewport units here

answered Jun 24 '19 at 04:50

Dehsen R

1
1

score -1 · Answer 4 · answered Jun 24 '19 at 04:37

-1

Try adding:

body { 
background-size: cover; 
   }

answered Jun 24 '19 at 04:37

springer937

11
3

2

Please provide some explanations along with your code, so that future users can follow your ideas/code more easily. - [From Review](https://stackoverflow.com/review/low-quality-posts/23348793) – HansHirse Jun 24 '19 at 05:31

background color full page

4 Answers4

Linked