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

Question

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

User · Answer

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/

User · Answer

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

User · Answer

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

User · Answer

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     And here s my JSFiddle   Have fun

User · Answer

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    lt div class  splitBg  gt       lt div style  max-width 960px  margin 0 auto  padding 0 15px  box-sizing border-box   gt           lt div style  float left  width 50   position relative  z-index 10   gt              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           lt  div gt           lt div style  float left  width 50   position relative  z-index 10   gt              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            lt  div gt           lt div style  clear both   gt  lt  div gt       lt  div gt   lt  div gt   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

User · Answer

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

User · Answer

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   lt html gt  x000D   lt body class  one  gt  x000D   x000D   lt div class  background  gt  x000D   lt  div gt  x000D   lt div class  background2  gt  x000D   lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  quot Run code snippet quot  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      lt div class  abWhiteAndBlack  gt     lt  div gt    Horizonal      lt div class  abWhiteAndBlack2  gt          lt  div gt    Diagonal      lt div class  abWhiteAndBlack3  gt          lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to background-color