How do you stretch a Background Image

Question

I have a gradient background that I'm using like follows in an ASP.Net Webforms application:

<div style="background-image: url(foo.jpg) repeat-x;">
    ... Injected HTML codes
</div>

Where foo.jpg is a 200x1 pixel image. My problem is this, the height of the injected HTML varys from about 200px to 1000+px depending on size of a datagrid. Also, this segment is part of a much larger page that uses for positioning content.

What I would like is that after the HTML is injected, have the background automatically stretch to fit the space so that the gradient is applied smoothly over the entire height.

Answer 1

CSS cannot stretch background images.

However, IMG elements can be stretched, so you can put an IMG right before the grid, use CSS to give it position: absolute and z-index:-1, and use jQuery to set its dimensions to be equal to the grid.

Answer 2

I've been in your situation before, and I ended up having about five different background images for the resolution variations. If it was their first time to the site (no cookie present), I'd present them with a landing page where I set a cookie (using Javascript) with the value of the client resolution (see my getViewportDimensions function in this blog post). On the server-side, I evaluated the resolution on the next request and chose which image to inject in my CSS. It works well. Be sure to have a default resolution set on the server-side in case the user agent has Javascript or cookies is disabled.

Answer 3

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.

To answer the question, I need to be a little more precise in my definition of my problem. in my original code,

<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>

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.

While resizing the background is the technically cleaner solution, what I did was

<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>

fooBottom.png for me is a 200px by 1px image that is 100% white at the bottom and 100% transparent at the top.

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.

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.

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.

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.

---

UPDATE - I've posted a working example at http://sntsoftware.com/Blog