The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css background with 2 colors Reply To: css background with 2 colors


I did try with linear gradient, but I don’t know how to stop it. I mean, I want to have the body background from 2 solid colours. for example in my app, the body, will have a class (prod1). This will apply a background from top to 50% height of RED color, and from 50% to bottom (100%) color white.

For when body will have the class of prod2, the background will have from top to 50% of it’s total height a colour of orange and from 50% of the body total height to the bottom (100%), the color will be white.

I want to achieve this look of 2 solid colour which will break at exact 1/2 body height.

Paulie, I did try this:
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 50%);

but I also have to specify a body height and I can’t since the height is based on the content?!

I don’t know if I express my self clear enough!!!

Thank you for your time guys.