How to Set Background-Color on 50% of Area CSS

CSS: Set a background color which is 50% of the width of the window

Older Browser Support

If older browser support is a must, so you can't go with multiple backgrounds or gradients, you're probably going to want to do something like this on a spare div element:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Example: http://jsfiddle.net/PLfLW/1704/

The solution uses an extra fixed div that fills half the screen. Since it's fixed, it will remain in position even when your users scroll. You may have to fiddle with some z-indexes later, to make sure your other elements are above the background div, but it shouldn't be too complex.

If you have issues, just make sure the rest of your content has a z-index higher than the background element and you should be good to go.

Modern Browsers

If newer browsers are your only concern, there are a couple other methods you can use:

Linear Gradient:

This is definitely the easiest solution. You can use a linear-gradient in the background property of the body for a variety of effects.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

This causes a hard cutoff at 50% for each color, so there isn't a "gradient" as the name implies. Try experimenting with the "50%" piece of the style to see the different effects you can achieve.

Example: http://jsfiddle.net/v14m59pq/2/

Multiple Backgrounds with background-size:

You can apply a background color to the html element, and then apply a background-image to the body element and use the background-size property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Example: http://jsfiddle.net/6vhshyxg/2/

EXTRA NOTE: Notice that both the html and body elements are set to height: 100% in the latter examples. This is to make sure that even if your content is smaller than the page, the background will be at least the height of the user's viewport. Without the explicit height, the background effect will only go down as far as your page content. It's also just a good practice in general.

How to set background-color on 50% of area CSS

We can achieve this effect with a linear gradient, background-size and background-position

The background looks like this:
```
background:  linear-gradient(to bottom, grey 0%, grey 100%) no-repeat;
```
All this linear-gradient does is give us a background colour that can be manipulated like a background image.

The gradient is treated like an image and can be centered and re-sized:

background-size: calc(100% - 100px) calc(100% - 100px);
background-position: center;

The calc reduces the size of the background by exactly 100px and the transparent space around the div when centered is 50px in width.

Full example

The second div shows the true size of the div and the 20vw width and height shows how the div can be re-sized.

div {  background: linear-gradient(to bottom, grey 0, grey 100%) no-repeat;  background-size: calc(100% - 100px) calc(100% - 100px); /* Reduce height of background by 100px and width by 100px*/    background-position: center;  padding: 80px;  /* 50px border + 30px additional padding */  width: 20vw;  height: 20vw;  min-width: 200px;  min-height: 200px;}div.no-gradient {  background: grey;}/*For example*/
html,body {  height: 100%;  margin: 0;}body {  background: linear-gradient(to bottom, black 0%, white 100%);}div {  float: left;}

<div>some text</div><div class="no-gradient">I am the same size as the other div</div>

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

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>

Background color 50% one color and 50% another color

you can use something like, but based upong the browsers you have to support, it may not work across all of them.

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

How to partially color an HTML element's background from bottom to top using CSS?

You can set background: blue as the first property and change the linear-gradient to the values of white, white to invert the declaration.

/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
  background: blue;
  width: 50px;
  height: 100px;
  border: 5px solid black;
  background-image: linear-gradient(white, white);
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

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

Fill only half of the container with a background color

Use a linear gradient:

#child {
  background: linear-gradient(to bottom, green 50%, white 0%); 
}

change white with body color or any color you want.

Source: CSS-Tricks

How to apply the background color to the entire viewport width?

you need to remove the margins and paddings on your page to remove the annoying white spaces at the side

like this

body{
  margin: 0;
  padding: 0;
}

heading background 3 color in same row

You can use CSS gradient for this. To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. Here for more information

.heading{
padding:2px;
background: linear-gradient(to left,
      #fffb0e 25%, #ffe30e 25% 50%, #FFC20E 50% 100%);
}

<h3 class="heading">Heading</h3>