StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I was researching exactly how do do SLaks solution and discovered a "hack" that works for my situation. While it doesn't do a stretch operation, I'm simulating one in a way that works for my situation and it is 100% CSS. I don't claim that this is a general solution, but it does work for me.</p> <p>To answer the question, I need to be a little more precise in my definition of my problem. in my original code, </p> <pre><code><div style="background-image: url(foo.jpg) repeat-x;"> ... Injected HTML codes </div> </code></pre> <p>foo.jpg is 600px x 1px gradient from a color to white which is color of web site. This way on the larger displays, I get a very smooth transition from color to white. That it doesn't go all the way to the bottom is something I can live with. The problem comes when I need to render some data that displays only 300px high. Then only 300 px of the 600px in the gradient display. Resulting in an "ugly" step change in the color. This is what I really needed to get rid of by doing the resizing.</p> <p>While resizing the background is the technically cleaner solution, what I did was </p> <pre><code><div style="background-image: url(foo.jpg) repeat-x;"> <div style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;" ... Injected HTML codes </div> </div> </code></pre> <p>fooBottom.png for me is a 200px by 1px image that is 100% white at the bottom and 100% transparent at the top.</p> <p>The key thing on the inner is the "background-position: bottom;" This positions the new background section. If the section being displayed for me is >800px high, this new code does nothing visually. </p> <p>But for sections shorter than 800px, what happens is the bottom image gets closer to the top. This coverage occurs because the inner block is drawn "above" the outer block. Then if the section gets shorter, the bottom background image covers more and more of the top background image. </p> <p>But because of the transparency in the lower image, it ensures that on shorter sections, that there is a blend to white at the bottom. </p> <p>I'm going to create a blog on my personal site that shows examples. When I get the example done, I'll update this post.</p> <hr> <p>UPDATE - I've posted a working example at <a href="http://sntsoftware.com/Blog/tabid/173/articleType/ArticleView/articleId/17/Simulated-Stretching-of-a-Gradient-Background.aspx" rel="nofollow noreferrer">http://sntsoftware.com/Blog</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload