css background with 2 colors

[Eduard]

Hey guys I’m trying to find a solution for a way to make the body, 2 colours. First one let’s just say black starts from the top and it will end at 50% of the browser height, and the second colour – white, starts from the 50% from the browser height and end up to 100% of the browser height.

Is there a way to achieve this without using images?

[Paulie_D]

Linear gradient with appropriate color stops?

body  {
background: linear-gradient(to bottom, black 0%,black 50%,#000000 50%,white 50%,white 100%); /* W3C */
}

[Alen]

http://www.colorzilla.com/gradient-editor/

[Eduard]

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.

[Eduard]

@Paulie, I don’t know what you just did there, but it’s working o man…..I own you 100000….00000 beers mate…Cheers that’s exactly what I was looking for. Thank you so much man.

[Eduard]

Hey Ed, thank you, this works great. Thank you so much for your time, as for the IE I will just use plain color, nothing more.

Regarding the classes it’s exactly what I’m doing.

I have 3 sliders. which slider with a data-type=””, and if the slider is active, I will store that class in a jquery var, and then apply that class to the body. so it is working perfect.

Cheers guys,
THANKS A LOT FOR YOU TIME.

[Eduard]

Another quick question, here is my dev server:

http://beyzacases.info/v0.1/

I’m using Royal slider premium plugin, doesn anyone know, how to get rid of this images been overlaped?

Thank you again.

[paulob]

Hi.

Your link above isn’t working I’m afraid.

Regarding your 50/50 background wouldn’t you need to fix the background with the code you are using or it will scroll away with content (unless you are only concerned with an initial viewport)?

e.g.

.prod1 {
  background-image: linear-gradient(to bottom, red, red 50%, white 50%);
  background-attachment:fixed;
  background-repeat: no-repeat;
}

You could do similar for IE9 with the :after element.

e.g.

html, body {
    margin:0;
    padding:0;
}
body { background:red; }
body:after {
    content:"";
    background:blue;
    position:fixed;
    top:0;
    bottom:50%;
    right:0;
    left:0;
    content:" ";
    z-index:-1;
}

It won’t work in IE8 (although it should) because IE8 won’t apply fixed positioning on generated content.

[Eduard]

ups, stupid me I posted my local server. the correct link is:

http://beyzacases.info/v0.1/

[darronz]

If you’re looking to make it with a 50/50 background with vertical split

[Author]

Posts