CODEWITHSUNDEEP
htmlcss
lock
lock

Reputation: 739

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

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

Upvotes: 2

Views: 6789

Answers (1)

Temani Afif
Temani Afif

Reputation: 272589

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

Upvotes: 5

Related Questions