It seems that you're using an outdated browser. Some things may not work as they should (or don't work at all).
We suggest you upgrade newer and better browser like: Chrome, Firefox, Internet Explorer or Opera

×
Is it possible in some easy way to make two colors background using only CSS?

Like this one: http://img843.imageshack.us/img843/2323/houseofnassau402dweilbu.png (colors are only example)

I can do it by repeating picture or workaround by using this page http://www.colorzilla.com/gradient-editor/ as simplified gradient but I'm looking for simpler CSS declaration of background.
No posts in this topic were marked as the solution yet. If you can help, add your reply
Fairly certain it is, but I don't know the tags off-hand. I know that css can do gradients, and I'm pretty sure you can apply it to backgrounds.

Something like: background-image linear-gradient(start point e.g. Left, hex colour 1,hex colour 2)
avatar
RealWeaponX: Fairly certain it is, but I don't know the tags off-hand. I know that css can do gradients, and I'm pretty sure you can apply it to backgrounds.

Something like: background-image linear-gradient(start point e.g. Left, hex colour 1,hex colour 2)
I do not want to use gradient - just two colors with sharp border.
REMOVED: Misunderstood the OP.
Post edited January 23, 2012 by adambiser
avatar
adambiser: Hopefully that'll help you get started at least.
Uhm.. what is this code supposed to do again? :D I was trying to analyze it but.. failed :D
I've also noticed that whole bottom part of this is between /* */
Gradients should be able to do what you want anyway.

This is a perfect 50-50 split of #2989d8 and #000000 (though I can't confirm the IE6-9 filter). Created with http://www.colorzilla.com/gradient-editor/.

background: -moz-linear-gradient(top, #2989d8 50%, #000000 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#2989d8), color-stop(50%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2989d8 50%,#000000 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2989d8 50%,#000000 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2989d8 50%,#000000 50%); /* IE10+ */
background: linear-gradient(top, #2989d8 50%,#000000 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
Post edited January 23, 2012 by Miaghstir
It should be fairly easy, I think. Too tired right now to try and do the CSS, but just make sure that the colors of the 'gradient' split at 50% (or whatever it is that you need).
If you read my 1st post again, you will notice that I've already know that page / method and I am looking for something simpler. ;)

I do not need gradients just two colors - so maybe there is just "one line of code" to do this?

EDIT: What I need to get is some basic background color (like red) which is little darker in bottom half to fill menu bar.
Post edited January 23, 2012 by Lexor
avatar
adambiser: Hopefully that'll help you get started at least.
avatar
Lexor: Uhm.. what is this code supposed to do again? :D I was trying to analyze it but.. failed :D
I've also noticed that whole bottom part of this is between /* */
Wait, I assumed you were asking about manipulating the GOG forums. Crap, sorry.

I think you'd have to set the background to one color then have a div on top with the other color.
Like the code found here: http://upwithabang.com/articles/example4/split-background.html
Post edited January 23, 2012 by adambiser
avatar
adambiser: Wait, I assumed you were asking about manipulating the GOG forums. Crap, sorry.

I think you'd have to set the background to one color then have a div on top with the other color.
Can I somehow set background only for bottom part of the div field?
avatar
Lexor: If you read my 1st post again, you will notice that I've already know that page / method and I am looking for something simpler. ;)

I do not need gradients just two colors - so maybe there is just "one line of code" to do this?

EDIT: What I need to get is some basic background color (like red) which is little darker in bottom half to fill menu bar.
Oops, sorry 'bout that.

It really is "one line of code", except each browser requires it's own prefix, making it one line for each prefix.

Another choice would be to have the body background be something, and the background for the menu be something else.

body { background-color: red; }
#menu { background-color: blue; }

...assuming, of course that your menu element has an id of "menu".

Structuring the HTML code into logical parts is half the battle.
Post edited January 23, 2012 by Miaghstir
avatar
adambiser: Wait, I assumed you were asking about manipulating the GOG forums. Crap, sorry.

I think you'd have to set the background to one color then have a div on top with the other color.
avatar
Lexor: Can I somehow set background only for bottom part of the div field?
I think you'd do something similar to the example in the link I gave two posts up, but instead, switch the width and height of the first div. I haven't tried this out though.
avatar
Miaghstir:
I think this sounds more like what you would want, Lexor.
Post edited January 23, 2012 by adambiser
avatar
Lexor: Can I somehow set background only for bottom part of the div field?
Not without gradients (or images), no.
avatar
adambiser: I think you'd do something similar to the example in the link I gave two posts up, but instead, switch the width and height of the first div. I haven't tried this out though.
I've just tried and it is not so easy - especially when I need this background not for full page just for only a small bar on it. :/
avatar
adambiser: I think you'd do something similar to the example in the link I gave two posts up, but instead, switch the width and height of the first div. I haven't tried this out though.
avatar
Lexor: I've just tried and it is not so easy - especially when I need this background not for full page just for only a small bar on it. :/
Does what Miaghstir posted not fit what you need?