How can apply multiple background color to one div

Question

I ve some scenario where I should use multiple background color to one div  It s better for me rather than using background images or additional div  But  I can t find easier way to use it by CSS  So  I need help about some scenario  Please  see the image      1  I want to build  A   for that I wrote   div A   background  linear-gradient to right   9c9e9f   f6f6f6       But  after writing that code  it ll like  B   But  I want exactly like  A   So  by css css3 how can I do it without adding more divs     2  Is it possible to make one portion smaller than other portion  For example  at  C   blue color is smaller at height  than the other portion  How  can I apply multiple background color to one div with making one portion smaller like  C  without adding additional divs to  C     Update  After  Mohammad s answer  I ve tried with that way  But  for  C  scenario  I can t decrease the height of blue portion  Can you please  tell me how can I do it   jsfiddle net mFjQ6

User · Accepted Answer

The A div can actually be made without  before or  after selector but using linear gradient as your first try  The only difference is that you must specify 4 positions  Dark grey from 0 to 50  and ligth grey from 50  to 100  like this   background  linear-gradient to right    9c9e9f 0   9c9e9f 50   f6f6f6 50   f6f6f6 100      As you know  B div is made from a linear gradient having 2 positions like this   background  linear-gradient to right    9c9e9f 0   f6f6f6 100      For the C div  i use the same kind of gradient as div A ike this   background  linear-gradient to right    9c9e9f 0   9c9e9f 50   33ccff 50   33ccff 100      But this time i used the  after selector with a white background like if the second part of your div was smaller    Please note that I added a better alternative below   Check this jsfiddle or the snippet below for complete cross-browser code    x000D   x000D  div  x000D      position relative  x000D      width 80   x000D      height 100px  x000D      color red  x000D      text-align center  x000D      line-height 100px  x000D      margin-bottom 10px  x000D    x000D   x000D   a  x000D      background   9c9e9f     Old browsers    x000D      background  -moz-linear-gradient left    9c9e9f 0    9c9e9f 50    f6f6f6 50    f6f6f6 100       FF3 6     x000D      background  -webkit-gradient linear  left top  right top  color-stop 0   9c9e9f   color-stop 50   9c9e9f   color-stop 50   f6f6f6   color-stop 100   f6f6f6       Chrome Safari4     x000D      background  -webkit-linear-gradient left    9c9e9f 0   9c9e9f 50   f6f6f6 50   f6f6f6 100       Chrome10  Safari5 1     x000D      background  -o-linear-gradient left    9c9e9f 0   9c9e9f 50   f6f6f6 50   f6f6f6 100       Opera 11 10     x000D      background  -ms-linear-gradient left    9c9e9f 0   9c9e9f 50   f6f6f6 50   f6f6f6 100       IE10     x000D      background  linear-gradient to right    9c9e9f 0   9c9e9f 50   f6f6f6 50   f6f6f6 100       W3C    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   9c9e9f   endColorstr   f6f6f6  GradientType 1       IE6-9    x000D    x000D   x000D   b  x000D      background   9c9e9f     Old browsers    x000D      background  -moz-linear-gradient left    9c9e9f 0    f6f6f6 100       FF3 6     x000D      background  -webkit-gradient linear  left top  right top  color-stop 0   9c9e9f   color-stop 100   f6f6f6       Chrome Safari4     x000D      background  -webkit-linear-gradient left    9c9e9f 0   f6f6f6 100       Chrome10  Safari5 1     x000D      background  -o-linear-gradient left    9c9e9f 0   f6f6f6 100       Opera 11 10     x000D      background  -ms-linear-gradient left    9c9e9f 0   f6f6f6 100       IE10     x000D      background  linear-gradient to right    9c9e9f 0   f6f6f6 100       W3C    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   9c9e9f   endColorstr   f6f6f6  GradientType 1       IE6-9    x000D    x000D   x000D   c      x000D      background   9c9e9f     Old browsers    x000D      background  -moz-linear-gradient left    9c9e9f 0    9c9e9f 50    33ccff 50    33ccff 100       FF3 6     x000D      background  -webkit-gradient linear  left top  right top  color-stop 0   9c9e9f   color-stop 50   9c9e9f   color-stop 50   33ccff   color-stop 100   33ccff       Chrome Safari4     x000D      background  -webkit-linear-gradient left    9c9e9f 0   9c9e9f 50   33ccff 50   33ccff 100       Chrome10  Safari5 1     x000D      background  -o-linear-gradient left    9c9e9f 0   9c9e9f 50   33ccff 50   33ccff 100       Opera 11 10     x000D      background  -ms-linear-gradient left    9c9e9f 0   9c9e9f 50   33ccff 50   33ccff 100       IE10     x000D      background  linear-gradient to right    9c9e9f 0   9c9e9f 50   33ccff 50   33ccff 100       W3C    x000D      filter  progid DXImageTransform Microsoft gradient  startColorstr   9c9e9f   endColorstr   33ccff  GradientType 1       IE6-9    x000D    x000D   c after  x000D      content     x000D      position absolute  x000D      right 0  x000D      bottom 0  x000D      width 50   x000D      height 20   x000D      background-color white  x000D    x000D   lt div class  a  gt A lt  div gt  x000D   lt div class  b  gt B lt  div gt  x000D   lt div class  c  gt C lt  div gt  x000D   x000D   x000D      There is also an alternative for the C div without using a white background to hide the a part of the second section  Instead  we make the second part transparent and we use the  after selector to act as a colored background with the desired position and size   See this jsfiddle or the snippet below for this updated solution    x000D   x000D  div   x000D    position  relative  x000D    width  80   x000D    height  100px  x000D    color  red  x000D    text-align  center  x000D    line-height  100px  x000D    margin-bottom  10px  x000D    x000D   x000D   a   x000D    background   9c9e9f  x000D       Old browsers    x000D    background  -moz-linear-gradient left   9c9e9f 0    9c9e9f 50    f6f6f6 50    f6f6f6 100    x000D       FF3 6     x000D    background  -webkit-gradient linear  left top  right top  color-stop 0    9c9e9f   color-stop 50    9c9e9f   color-stop 50    f6f6f6   color-stop 100    f6f6f6    x000D       Chrome Safari4     x000D    background  -webkit-linear-gradient left   9c9e9f 0    9c9e9f 50    f6f6f6 50    f6f6f6 100    x000D       Chrome10  Safari5 1     x000D    background  -o-linear-gradient left   9c9e9f 0    9c9e9f 50    f6f6f6 50    f6f6f6 100    x000D       Opera 11 10     x000D    background  -ms-linear-gradient left   9c9e9f 0    9c9e9f 50    f6f6f6 50    f6f6f6 100    x000D       IE10     x000D    background  linear-gradient to right   9c9e9f 0    9c9e9f 50    f6f6f6 50    f6f6f6 100    x000D       W3C    x000D    filter  progid DXImageTransform Microsoft gradient  startColorstr   9c9e9f   endColorstr   f6f6f6   GradientType 1   x000D       IE6-9    x000D    x000D   x000D   b   x000D    background   9c9e9f  x000D       Old browsers    x000D    background  -moz-linear-gradient left   9c9e9f 0    f6f6f6 100    x000D       FF3 6     x000D    background  -webkit-gradient linear  left top  right top  color-stop 0    9c9e9f   color-stop 100    f6f6f6    x000D       Chrome Safari4     x000D    background  -webkit-linear-gradient left   9c9e9f 0    f6f6f6 100    x000D       Chrome10  Safari5 1     x000D    background  -o-linear-gradient left   9c9e9f 0    f6f6f6 100    x000D       Opera 11 10     x000D    background  -ms-linear-gradient left   9c9e9f 0    f6f6f6 100    x000D       IE10     x000D    background  linear-gradient to right   9c9e9f 0    f6f6f6 100    x000D       W3C    x000D    filter  progid DXImageTransform Microsoft gradient  startColorstr   9c9e9f   endColorstr   f6f6f6   GradientType 1   x000D       IE6-9    x000D    x000D   x000D   c   x000D    background   9c9e9f  x000D       Old browsers    x000D    background  -moz-linear-gradient left   9c9e9f 0    9c9e9f 50   rgba 0  0  0  0  50   rgba 0  0  0  0  100    x000D       FF3 6     x000D    background  -webkit-gradient linear  left top  right top  color-stop 0    9c9e9f   color-stop 50    9c9e9f   color-stop 50   rgba 0  0  0  0    color-stop 100   rgba 0  0  0  0     x000D       Chrome Safari4     x000D    background  -webkit-linear-gradient left   9c9e9f 0    9c9e9f 50   rgba 0  0  0  0  50   rgba 0  0  0  0  100    x000D       Chrome10  Safari5 1     x000D    background  -o-linear-gradient left   9c9e9f 0    9c9e9f 50   rgba 0  0  0  0  50   rgba 0  0  0  0  100    x000D       Opera 11 10     x000D    background  -ms-linear-gradient left   9c9e9f 0    9c9e9f 50   rgba 0  0  0  0  50   rgba 0  0  0  0  100    x000D       IE10     x000D    background  linear-gradient to right   9c9e9f 0    9c9e9f 50   rgba 0  0  0  0  50   rgba 0  0  0  0  100    x000D       W3C    x000D    filter  progid DXImageTransform Microsoft gradient  startColorstr   9c9e9f   endColorstr   ffffff00   GradientType 1   x000D       IE6-9    x000D    x000D   x000D   c after   x000D    content      x000D    position  absolute  x000D    right  0  x000D    top  0  x000D    width  50   x000D    height  80   x000D    background-color   33ccff  x000D    z-index  -1 x000D    x000D   lt div class  a  gt A lt  div gt  x000D   lt div class  b  gt B lt  div gt  x000D   lt div class  c  gt C lt  div gt  x000D   x000D   x000D

User · Answer

You can create something like c using CSS multiple-backgrounds   div       background  linear-gradient red  red                   linear-gradient blue  blue                   linear-gradient green  green       background-size  30  50                        30  60                        40  80       background-position  0  top                           calc 30    100    100 - 30   top                           calc 60    100    100 - 40   top      background-repeat  no-repeat      Note  you still have to use linear-gradients for background types  because CSS will not allow you to control the background-size of a single color layer  So here we just make a single-color gradient  Then you can control the size position of each of those blocks of color independently  You also have to make sure they don t repeat  or they ll just expand and cover the whole image   The trickiest part here is background-position  A background-position of 0  puts your element s left edge at the left  100  puts its right edge at the right  50  centers is middle   For a fun bit of math to solve that  you can guess the transform is probably linear  and just solve two little slope-intercept equations       at 0   the div s left edge is 0  from the left  0   m   0   b     at 100   the div s right edge is 100  - width  from the left  100   m    100 - width    b b   0  m   100    100 - width    so to position our 40  wide div 60  from the left  we put it at 60    100    100 - 40   or use css-calc

User · Answer

it is compatible with all the browsers  change values to fit your application  background   fdfdfd  background  -moz-linear-gradient top   fdfdfd 0    f6f6f6 60    f2f2f2 100    background  -webkit-gradient linear  left top  left bottom  color-stop 0   fdfdfd   color-stop 60   f6f6f6   color-stop 100   f2f2f2    background  -webkit-linear-gradient top   fdfdfd 0   f6f6f6 60   f2f2f2 100    background  -o-linear-gradient top   fdfdfd 0   f6f6f6 60   f2f2f2 100    background  -ms-linear-gradient top   fdfdfd 0   f6f6f6 60   f2f2f2 100    background  linear-gradient to bottom   fdfdfd 0   f6f6f6 60   f2f2f2 100    filter  progid DXImageTransform Microsoft gradient  startColorstr   fdfdfd   endColorstr   f2f2f2  GradientType 0

User · Answer

With  after and  before you can do that   HTML    lt div class  a  gt   lt  div gt   lt div class  b  gt   lt  div gt   lt div class  c  gt   lt  div gt    CSS   div       height  100px      position  relative     a       background   9C9E9F     b       background  linear-gradient to right   9c9e9f   f6f6f6      a after   c before   c after       content          width  50       height  100       top  0      right  0      display  block      position  absolute     a after       background   f6f6f6         c before       background   9c9e9f      left  0     c after       background   33CCFF      right  0      height  80       And a demo

User · Answer

You could apply both background-color and border to make it look like 2 colors   div A   width  50px  background-color   9c9e9f  border-right  50px solid  f6f6f6      The border should have the same size as the width

User · Answer

Sorry for misunderstanding  from what I understood you want your DIV to have three different colors with different heights  This is the output of my code       If this is what you want try this code    x000D   x000D  div   x000D      height  100px  x000D      width 400px  x000D      position  relative  x000D    x000D   c   x000D      background  blue     Old browsers    x000D    x000D   x000D   c after  x000D      content      x000D      position  absolute  x000D      width 20   x000D      left 0  x000D      height 110   x000D      background  yellow  x000D    x000D   c before  x000D      content      x000D      position  absolute  x000D      width 40   x000D      left 60   x000D      height 140   x000D      background  green  x000D    x000D   lt div class  c  gt  lt  div gt  x000D   x000D   x000D

[html] How can apply multiple background color to one div

Examples related to html

Examples related to css