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

Trying to achieve a background on a page that is "split in two"; two colors on opposite sides (seemingly done by setting a default background-color on the body tag, then applying another onto a div that stretches the entire width of the window).

I did come up with a solution but unfortunately the background-size property doesn't work in IE7/8 which is a must for this project -

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

Since it's just about solid colors maybe there is a way using only the regular background-color property?

This question is related to css background-color

The answer is


This is an example that will work on most browsers.
Basically you use two background colors, the first one starting from 0% and ending at 50% and the second one starting from 51% and ending at 100%

I'm using horizontal orientation:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

For different adjustments you could use http://www.colorzilla.com/gradient-editor/


this should work with pure css.

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

tested in Chrome only.


Use on your image bg

Vertical split

background-size: 50% 100%

Horizontal split

background-size: 100% 50%

Example

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

You could use the :after pseudo-selector to achieve this, though I am unsure of the backward compatibility of that selector.

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

I have used this to have two different gradients on a page background.


The most bullet-proof and semantically correct option would be to use fixed-positioned pseudo-element (::after or ::before). Using this technique do not forget to set z-index to elements inside the container. Also mind, that content:"" rule for pseudo-element is needed, otherwise it won't get rendered.

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

Live example: https://jsfiddle.net/xraymutation/pwz7t6we/16/


So, this is an awfully old question which already has an accepted answer, but I believe that this answer would have been chosen had it been posted four years ago.

I solved this purely with CSS, and with NO EXTRA DOM ELEMENTS! This means that the two colors are purely that, just background colors of ONE ELEMENT, not the background color of two.

I used a gradient and, because I set the color stops so closely together, it looks as if the colors are distinct and that they do not blend.

Here is the gradient in native syntax:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

Color #74ABDD starts at 0% and is still #74ABDD at 49.9%.

Then, I force the gradient to shift to my next color within 0.2% of the elements height, creating what appears to be a very solid line between the two colors.

Here is the outcome:

Split Background Color

And here's my JSFiddle!

Have fun!


You can make a hard distinction instead of linear gradient by putting the second color to 0%

For instance,

Gradient - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Hard distinction - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);


I have used :after and it is working in all major browsers. please check the link. just need to careful for the z-index as after is having position absolute.

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

fiddle link


One way to implement your issue is to add a single line to your div's css:

background-image: linear-gradient(90deg, black 50%, blue 50%);

Here is a demonstration code and more options (horizontal, diagonal, etc.), you can click on "Run code snippet" to see it live.

_x000D_
_x000D_
.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}
_x000D_
Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>
_x000D_
_x000D_
_x000D_


Simple solution to achieve "split in two" background:

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

You can also use degrees as direction

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

_x000D_
_x000D_
.background{_x000D_
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);_x000D_
 height:200px;_x000D_
 _x000D_
}_x000D_
_x000D_
.background2{_x000D_
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);_x000D_
_x000D_
 height:200px;_x000D_
 _x000D_
}
_x000D_
<html>_x000D_
<body class="one">_x000D_
_x000D_
<div class="background">_x000D_
</div>_x000D_
<div class="background2">_x000D_
</div>_x000D_
</body>_x000D_
</html>
_x000D_
_x000D_
_x000D_


In a past project that had to support IE8+ and I achieved this using a image encoded in data-url format.

The image was 2800x1px, half of the image white, and half transparent. Worked pretty well.

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

You can see it working here JsFiddle. Hope it can help someone ;)


if you want to use linear-gradient with 50% of height:

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;