Css Background With 2 Colors - CSS-Tricks

Home › Forums › CSS › css background with 2 colors

• This topic is empty.

Viewing 10 posts - 1 through 10 (of 10 total)

• Author Posts
• November 8, 2013 at 6:00 am #155435 EduardParticipant

  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?

  November 8, 2013 at 11:14 am #155463 Paulie_DMember

  Linear gradient with appropriate color stops?

  body { background: linear-gradient(to bottom, black 0%,black 50%,#000000 50%,white 50%,white 100%); /* W3C */ } November 8, 2013 at 11:18 am #155464 AlenParticipant

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

  November 8, 2013 at 11:26 am #155467 EduardParticipant

  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.

  November 8, 2013 at 11:35 am #155469 EduardParticipant

  @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.

  November 8, 2013 at 12:21 pm #155474 EduardParticipant

  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.

  November 8, 2013 at 12:27 pm #155475 EduardParticipant

  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.

  November 8, 2013 at 1:34 pm #155483 paulobParticipant

  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.

  November 8, 2013 at 2:00 pm #155491 EduardParticipant

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

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

  September 30, 2014 at 5:30 am #185055 darronzParticipant

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

• Author Posts

Viewing 10 posts - 1 through 10 (of 10 total)

• The forum ‘CSS’ is closed to new topics and replies.