Help - Search - Members - Calendar
Full Version: Stretching Content Box With Gradient
Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design
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 smile.gif
lolzaka
QUOTE (Mathijs1988 @ Apr 1 2009, 05:52 AM) *
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 smile.gif


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:
CODE
#menu { background: #000000 url(gradient.png) repeat-x left top; }
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.