2 replies to this topic

[Mathijs1988]

Does anyone know how to do it? I've searched google & browsed through many forums but I have yet to find an answer. I want to make a content box with a gradient in it and when I type something in there it should stretch (along with the gradient). Is this possible to achieve somehow in html/css/php or whatever? Please help me out

[lolzaka]

Mathijs1988, on Apr 1 2009, 05:52 AM, said:

Does anyone know how to do it? I've searched google & browsed through many forums but I have yet to find an answer. I want to make a content box with a gradient in it and when I type something in there it should stretch (along with the gradient). Is this possible to achieve somehow in html/css/php or whatever? Please help me out

You should save the gradient as an image, lets say its a gradient with the starting color of #ffffff (white) and an end color of #000000 (black). You shouls save the gradient as an image, lets say gradient.png

Now the css:

#menu {
background-image: url(gradient.png);
background-repeat: repeat-x;
background-color: #000000;
}

The repeat x stands for horizontal and the rest of the div will stretch with #000 because thats the end color of the gradient.

Good luck!

[rc69]

Note: That method would give the top of the box the gradient and the extended portion a solid color, which is about as good as it gets with HTML.

You can probably use JS to create a gradient that would stretch with the box rather than just fill in with solid color, but it would be extremely complex. I can't even imagine where i would want to start making something like that (and i've been at this for a while, so you should trust me when i say that you should stick to the above method).

As a side note though, i prefer short hand:

#menu { background: #000000 url(gradient.png) repeat-x left top; }