background color which is 50% of the height of the window CSS

Question

Trying to achieve a background on a page that is "split in two"; two colors on opposite sides, do this with linear-gradient but if some element(div) large height background color repeat

<body>
 <div class="blocktest">
  test
 </div>
</body>

css :

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height:100vh;
}
.blocktest {
  height:1500px;
}

demo

I want 50% of the page color1 and the rest of the page color is color2

background-repeat: no-repeat; ? If I get you right. – VXp Sep 21 '18 at 10:27 — VXp, Sep 21 '18 at 10:27

Temani Afif · Accepted Answer · 2018-09-21T10:35:16.973

Use min-height instead of height:

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  min-height: 100vh;
}

.blocktest {
  height: 1500px;
}

<div class="blocktest">
  test
</div>

Actually your body is limited to 100vh and background is getting propagated to root element in order to cover the whole screen. So you see 2 backgrounds, the one of the root element and above it the one of the body.

If you keep height:100vh and add another background to html you will notice this:

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height: 100vh;
}

.blocktest {
  height: 1500px;
}
html {
 background:pink;
}

<div class="blocktest">
  test
</div>

In case you want to only cover 100vh of your background, make the html background white or disable the repeat:

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height: 100vh;
  /* Or background-repeat:no-repeat */
  margin:0;
}

.blocktest {
  height: 1500px;
}
html {
 background:white;
}

<div class="blocktest">
  test
</div>

Another related question : How to remove the stripes that appears when using linear gradient property

background color which is 50% of the height of the window CSS

1 Answers1