Menu
ok say the content inside the <body> totals 300px high.
If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient
Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.
I am assuming this is not a bug since it is the same in both webkit and gecko.
But is there a way to make the gradient stretch to fill the window instead of repeat?
833
A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). A percentage of 0% , or a length of 0 , represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat.
CSS Linear GradientsTo create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
In CSS, you can't transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two. He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element.
Apply the following CSS:
html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } Edit: Added margin: 0; to body declaration per comments (Martin).
Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
193
Regarding a previous answer, setting html and body to height: 100% doesn't seem to work if the content needs to scroll. Adding fixed to the background seems to fix that - no need for height: 100%;
E.g.:
body { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed; }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
