CODEWITHSUNDEEP
css
BigMitch
BigMitch

Reputation: 19

How split div background into 'n' color bands with CSS

I have a large table, and need to change the background of a cell to be 1 to 6 color bands, like rectangle stacked on top of each other (and other information will appear within the cell). While this example is a table, I'm guessing this applies to any DIV. I'd like to be able (via javascript on the fly) grab the 'cellcontainer' DIV in the DOM and create children DIV's to create a banded background effect. 

<table border=1 width=400 height=400>
    <tr>
        <td>
            <div class="cellcontainer">
                One
            </div>
        </td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Four</td>
    </tr>
</table>

For this simple table, I'm trying to take the first cell (with div 'cellcontainer') and make the background three different colors, like light blue, yellow, and green. I've tried adding children divs with height=33%, and setting cellcontainer's style to relative and children divs to absolute, etc. but I haven't found the magic combination.

Upvotes: 0

Views: 796

Answers (1)

Lodder
Lodder

Reputation: 19733

When you say you want to make the background of the cell 3 different colours, do you mean a gradient? If so try this

else I'm not too sure what you mean by "make the background 3 different colours".

Upvotes: 1

Related Questions