CODEWITHSUNDEEP
html
Ganesh
Ganesh

Reputation: 27

How to have two background color in a td without spanning it?

Hi Sir/madam i want to have a different background in the top and bottom of td, i.e first half should be in green color and second half in red color...

Upvotes: 0

Views: 192

Answers (4)

Anthony
Anthony

Reputation: 599

incase you don't like gradients (just for fun). http://codepen.io/anon/pen/mqdvB

Upvotes: 0

stefan bachert
stefan bachert

Reputation: 9624

To do this directly you could set an image with this feature as background. Something like

style="background-image:url(twocolor.png);"

Upvotes: 1

techfoobar
techfoobar

Reputation: 66693

Use CSS Gradients. In your case, the CSS will be:

background-image: linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -o-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -moz-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -ms-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(0,255,0)),
    color-stop(0.5, rgb(255,0,0))
);

Use this site for generating more: http://gradients.glrzad.com/

Upvotes: 1

aNewStart847
aNewStart847

Reputation: 1076

Try a gradient:

td {
    background: #00ff00;
    background: -moz-linear-gradient(top,  #00ff00 0%, #00ff00 49%, #ff0000 50%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(49%,#00ff00), color-stop(50%,#ff0000), color-stop(100%,#ff0000));
    background: -webkit-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: -o-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: -ms-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: linear-gradient(to bottom,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=0 );
}

To edit this gradient use this.

Upvotes: 0

Related Questions