ansaurus

Question

Using CSS to make my gradient image stretch itself vertically.

Answer 1

A:

You probably can't. Is it an option to produce a taller gradient image, that will not always be entirely shown (you won't always see all the way to white) but will always be tall enough? It's not too hard to hide the overflow...

Tomas Lycken 2009-09-02 14:09:51

Answer 2

A:

You cant stretch it, when image is set as a background.

Things you can do:

Ugly way: use IMG tag and stretch it height.
Good way: set background to white url(...) no-repeat, so all after gradient would be in color of last line of your gradient.

Thinker 2009-09-02 14:11:11

Answer 3

+2 A:

You can't stretch it. What you can do, though, is change its background-repeat to repeat-x and set a background colour equal to the color of the bottom of the image. This'll display the gradient only once vertically, then display a solid colour with no seam between the two

ceejayoz 2009-09-02 14:11:50

Answer 4

A:

You can't stretch images using CSS

Stephen lacy 2009-09-02 14:12:15

Answer 5

A:

The CSS3 background-size property will allow you to specify a percentage for a background image's height, but until it's widely supported there's no way to do this directly.

ceejayoz's suggestion is probably your best bet; and if you use a really tall gradient the effect won't be all that noticeable (I've used the same technique on several pages I've designed).

Donut 2009-09-02 14:13:08

Answer 6

+1 A:

In the near future, you can use CSS gradients to do that. This already works in Safari 4, and will also work in Firefox 3.6. The whole thing is still rather experimental, though, and the details will likely change as CSS3 evolves.

For Opera you could use SVG. Create a file like this (example taken largely from the SVG specification):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <defs>
      <linearGradient id="MyGradient" x1="0" y1="0" x2="0" y2="100%">
        <stop offset="0%" stop-color="blue" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
    </defs>
    <rect fill="url(#MyGradient)" width="100%" height="100%"/>
  </g>
</svg>

And then simply use that as the background image:

.Content { background: url(gradient.svg); }

For Internet Explorer you could use a gradient filter. E.g.

.Content {
    filter: progid:DXImageTransform.Microsoft.Gradient(
        startColorstr='blue', endColorstr='white', gradientType='0');
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
        startColorstr='blue', endColorstr='white', gradientType='0')";
}

Other than this, and for browsers that don't support any of these, your best bet is to follow the suggestion given by ceejayoz, Thinker and Donut before me: don't (vertically) repeat the gradient image and set the background to that of the end of the gradient.

mercator 2009-09-02 15:03:05

ansaurus

tags:

views:

answers:

Using CSS to make my gradient image stretch itself vertically.

related questions