Half Background Color for Div

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.

Half Background color for div

<div style="background-color: #007700; height: 200px; width: 100%"></div>

It's your green background... just put into that div - another three div-s with content, position them absolute and play with margins:

Ready DEMO. It maybe hard to understand, if you are novice in CSS, but google is powerful.

<div style="background-color: #007700; height: 200px; width: 100%">
   <div style="margin-left: 1%" class="bubu">1</div>
   <div style="margin-left: 33%" class="bubu">2</div>
   <div style="margin-left: 65%" class="bubu">3</div>
</div>

and CSS:

 .bubu {
    position: absolute;
    height: 300px;
    width: 30%;
    margin-top: 50px;
    margin-right: 15px;
    box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.7);
    border-radius: 10px;
    background-color: white;
    text-align: center;
    padding-top: 10px;
  }

*width could be set in pixels, if you need fixed width.

How to provide background color to half of two div?

You can make use of linear-gradient for background.

.bg {
  background: linear-gradient(to bottom, #ddd 50%, #9A8D6D 50%); /* Go towards the bottom, Cover #ddd for 50%, Cover #9a8d60 for the other half */
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>

How to color a div half blue, half yellow?

You can do this:

Here is the JSFiddle demo

Snippet Example

 div{

     width:400px;

     height:350px;

     background: linear-gradient(to right, blue 50%, yellow 50%);

    }

<div></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 with body color or any color you want.

Source: CSS-Tricks

Different background-color for left and right half of div

Add a background image with the two colors to the outer div and allow the browser to scale it (instead of tiling it).

Each color should fill exactly 50% of the width of the image to make sure the colors will never leak on either side.

Maybe even position the image absolutely behind the inner div.

For ideas how to stretch the image, see this question: CSS Background Repeat

Only colour half a div with CSS gradients

try something like this:

background: green;
background: -moz-linear-gradient(left, green 0%, white 50%);
background: -webkit-linear-gradient(left, green 0%, white 50%);
background: linear-gradient(to right, green 0%, white 50%);

Here a link to a code sample on CodePen

You can go crazy with gradients on this nice website

EDIT

If you want to color exactly half of the div, w/o the shade/gradient, use this code:

background: green;
background: -moz-linear-gradient(left, green 50%, white 50%);
background: -webkit-linear-gradient(left, green 50%, white 50%);
background: linear-gradient(to right, green 50%, white 50%);

if you want a diagonal from bottom left to top right, use this code:

background: green;
background: -moz-linear-gradient(45deg, green 50%, white 50%);
background: -webkit-linear-gradient(45deg, green 50%, white 50%);
background: linear-gradient(45deg, green 50%, white 50%);

Check the linked Codepen sample for the updated code sample.

How to place a half filled background for a div

A method (by no means the only one) would be to add an ::after pseudo-element on the parent, which adds another background. For example:

#profile_wrapper {
  position: relative;
}

#profile_wrapper:after {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  right: 0;

  background: white;
  z-index: 0;
}

That pseudo-element will apply a white color to the lower half of the parent. Note that the other children, such as the profile image itself, must be given a positive z-index to stay on top.

For what it's worth, pseudo-elements have slightly wider support than multiple background images, as long as you use single-colon syntax (:after). Basically, it's just IE8. And if you're having to worry about IE8...

Here is a version of this applied to your pen.

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>

---

Related Topics