Menu
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?
650
The to bottom direction tells you that your gradient is going from top to bottom. So if the first color is 85%, that means that it goes down to 85% of the height of the container. By inverting the percentage (85% -> 15%), you can achieve the result you want. That did the trick!
The linear-gradient syntax is equivalent to placing colour stops as: white 50%, yellow 75% and red 100% as the stops without percentage or distance values will spread out equally to fill the remaining space.
There are 3 different CSS gradients: linear, conic, and radial. Each gradient uses a CSS function to pass in multiple color arguments. The colors can be in the format of hex, hsla, rgba or named colors. In addition, you can pass in direction and angles to specify the shape and transition of the gradient.
CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point)
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%); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
