CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 441

How to set gradient background on table header?

EDIT: Sorry! Seems I'm an idoit. It is working, just the colours were too similar. Long day lol.

I am trying to get a gradient background on some table headers:

http://jsfiddle.net/g2fy4/

I have used the exact same code for gradients before an I can't understand why it's not working :-/

#content.postagepage table th.columnwidthbig {
color:#fff;
background-color: #3d9520;
background-image: -webkit-linear-gradient(top, #589D3D, #3d9520);
background-image: -moz-linear-gradient(top, #589D3D, #3d9520);
background-image: -o-linear-gradient(top, #589D3D, #3d9520);
background-image: -ms-linear-gradient(top, #589D3D, #3d9520);
background-image: linear-gradient(top, #589D3D, #3d9520);
text-shadow: 1px 1px 5px #000;
}

Upvotes: 1

Views: 9283

Answers (2)

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

I have done the changes, here is your edited css with Fiddle link. I have done the following changes in your css file.

#content.postagepage table th.columnwidthbig {
color:#fff;
background-color: #3d9520;
background: rgb(230, 16,21);
background: -moz-linear-gradient(90deg, rgb(230, 16,21) 30%, rgb(81, 4, 7) 70%);
background: -webkit-linear-gradient(90deg, rgb(230, 16,21) 30%, rgb(81, 4, 7) 70%);
background: -o-linear-gradient(90deg, rgb(230, 16,21) 30%, rgb(81, 4, 7) 70%);
background: -ms-linear-gradient(90deg, rgb(230, 16,21) 30%, rgb(81, 4, 7) 70%);
background: linear-gradient(180deg, rgb(230, 16,21) 30%, rgb(81, 4, 7) 70%);
text-shadow: 1px 1px 5px #000;
}

Upvotes: 0

Axel Amthor
Axel Amthor

Reputation: 11106

Actually, in FF this is working but the two colors #589D3D, #3d9520 are quite similar that at a first glance the gradient isn't really recognizable.

I changed the colors to background-image: -moz-linear-gradient(top, blue, yellow); and it gets more obvious.

Upvotes: 1

Related Questions