Why background-attachment: fixed makes the gradient to appear on entire page? - html

Question

I have studied 5 SO questions but they all talk about how to do it.
One question also talked about why background have special behavior on body and html tags.
But my question is: Why fixed attachment makes the gradient to appear on entire page?
I mean, lets take a 200 x 200 px image as a background. It will remain fixed even when we scroll the page. (assuming background-attachment: fixed; property is applied).
But when we add gradient as a background on body tag, it stretches to entire page. Now I have studied that gradients are supposed to work like that. OK I understand. But it does not appear on entire page when background-attachment: fixed; is not specified. It repeats instead.
Why does background-attachment: fixed makes the gradient to stretch on entire page? This doesn't happen when we use a plain image.
So my question is: why this behavior comes when we apply background-attachment: fixed property?
The ONLY behavior which should come is that the gradient should remain fixed. That's it. Because that's what the use of this property.
<style>
body
{
background: linear-gradient(skyblue, orange);
background-attachment: fixed;
}
</style>

Answer 1

When you say:
"...But when we add gradient as a background on body tag, it stretches
to entire page. Now I have studied that gradients are supposed to work
like that. ..."
You are wrong. Gradients are not supposed to work like that. A gradient is just a background-image. That's it. They behave like background images because they are background images.
The reason, you see that behaviour is not because they are supposed to work like that. The reason the work like that is because they are images. But, you haven't defined the size explicitly. So, without an explicit size, they can't have an intrinsic size. Which is why they match size of the element they are in.
From this Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
.. Like any other gradient, a CSS linear gradient is not a CSS
color but an image with no intrinsic dimensions; that is, it has
neither natural or preferred size, nor ratio. Its concrete size will
match the one of the element it applies to...
In order to achieve what you want, you need to apply all properties relating to background-image. Specifically, the background-size, background-position. Once that is done, you need to define your gradient.
Demo Fiddle: http://jsfiddle.net/abhitalks/comsxw8m/
Snippet with relevant CSS:
body {
background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
background-repeat: no-repeat;
background-size: 120px 120px;
background-position: top center;
background-attachment: fixed;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Example 2:
See this fiddle: http://jsfiddle.net/abhitalks/comsxw8m/1/
Here the gradient is applied to body with a fixed size and is repeated. Another gradient is applied to a div which is fixed. Hope now you get the idea clearer.
Snippet 2:
body {
background-image: linear-gradient(to bottom, #fff 0%, #0ff 100%);
background-repeat: repeat;
background-size: 64px 64px;
}
div {
width: 240px; height: 240px;
margin: 32px auto;
overflow: auto;
background-image: linear-gradient(to bottom, #fff 0%, #00f 100%);
background-repeat: no-repeat;
background-size: 120px 120px;
background-position: center center;
background-attachment: fixed;
}
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>