CODEWITHSUNDEEP
htmlcss
Jon Mitten
Jon Mitten

Reputation: 2055

CSS3 Gradients by pixel, instead of percentage

I'm wanting to create a linear gradient background, that fits the same no matter the size of the browser window, to accomodate a fixed-height header, sub-header, and content div.

My issue is I don't want the gradient to scale when I move the page around. I could use a 1px wide image to get the same result, I suppose, but I ultimately want the site to be as image-free as possible, barring the logo.

Is it possible to use a pixel-defined gradient instead of a percentage-defined gradient?

Upvotes: 53

Views: 37585

Answers (2)

Jim Jeffers
Jim Jeffers

Reputation: 17930

Yes you can. You can substitute standard units in place of the percentages. See this example:

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%);

Upvotes: 58

Marat Tanalin
Marat Tanalin

Reputation: 14123

If you need a fixed-size gradient, use the background-size property to specify its size.

Upvotes: 11

Related Questions