I want to horizontally split the background into two colors where one is black color. And de other o-CodePudding

something like this

body {
    height:100%;
    background: linear-gradient(top, #d808a4 50%, black 50%);
    background: linear-gradient(top, #d808a4 50%,black 50%);
    background: linear-gradient(to bottom, #d808a4 50%,black 50%);
    height: 229vh;
}

I want to horizontally split the background into two colors where one is black color. And I want the other one to be a gradient that goes from pink to purple, I have manage to split into purple and black, but i want a purple pink grandient, can someone help me?

CodePudding user response：

You cannot have multiple background, the newer one will overwrite the old ones. What you can do is to have multiple gradients in a single background such as (try scrolling):

body {
  height: 200vh;
  background: 
    linear-gradient(to bottom, transparent 50%, black 50%), 
    linear-gradient(100deg, #8a07ff, #f500d7);
}

CodePudding user response：

#top-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: black;
}

#bottom-half {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 50%;
  background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%);

}

<div id="bottom-half"></div>
<div id="top-half"></div>

2 divs for each half

position: absolute and left: 0 and top: 50% sets the position

width: 100% sets it to screen width

height: 50% sets the height for each one to half the screen width

background-color: black obviously sets the background color to black, and background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%) sets the background to a gradient (you can generate nice CSS gradients at https://cssgradient.io/ )

CodePudding user response：

You can do this with just one background setting.

This snippet separates out each of the CSS background settings to make it clearer what is going on.

The whole element gets a black background, then a background-image which is a linear-gradient is defined. This will sit on top of the black background-color. It is given a size and a position and is made not to repeat.

Obviously change the colors and the size to what you want.

.bg {
  width: 100vw;
  height: 100vh;
  background-color: black;
  background-image: linear-gradient(to right, purple, magenta);
  background-size: 80% 50%;
  background-position: center top;
  background-repeat: no-repeat;
}

<div ></div>