CODEWITHSUNDEEP
htmlcssgradient
brothman01
brothman01

Reputation: 155

HTML/CSS gradient background on a table

I made this simple navigation bar with a gradient background.

as you can see, it has a gradient background. It is nothing fancy, just used a photoshop gradient masked by the table. I made the photoshop version just to show my design, and now I am having trouble recreating it online. How do I make an HTML table have this gradient as it's background?

I read some answers to similar questions, but they had more complex answers than I am looking for. I do not need to tile it, I just want to set the background of my table to this gradient. (gradient generated on the spot or a repeated image, no preference)

Upvotes: 2

Views: 38824

Answers (2)

DACrosby
DACrosby

Reputation: 11460

I'm using a random gradient because I can't see your desired one, but here's a quick CSS3 example.

HTML

<table>
    <tr>
        <td>Table Data</td>
    </tr>
</table>

CSS

table{
    /* set your gradient code here */
    background: rgb(240,183,161);
    background: -moz-linear-gradient(-45deg,  rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1)));
    background: -webkit-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: -o-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: -ms-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: linear-gradient(135deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 );

}

Gradient generated with: http://www.colorzilla.com/gradient-editor/

Working Fiddle: http://jsfiddle.net/daCrosby/43ZkH/

Upvotes: 7

Nikola R.
Nikola R.

Reputation: 1173

You can use a DIV as a parent for table which will have gradient and padding: 0;

<div style="background: url('gradient.jpg') repeat-x left top">
<table>
<!-- table content here -->
</table>
</div>

** Supported in all browsers

Upvotes: 1

Related Questions