Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
67 lines (63 sloc) 2.06 KB
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
body {
background: linear-gradient(#A101A6 0px, #E200A4 50px, #F16C97 80px, #FFFFFF 300px);
background-attachment: fixed;
var height = 100;
window.setInterval(function() {
var home = document.getElementById("home"); = (height + "px");
var span = document.getElementById("height");
span.textContent = (height + "px");
height += 1000;
if (height > 100000) {
height = 100;
}, 100);
<body id="home">
<h1>I don't understand linear-gradient</h1>
Body height = <span id="height"></span>;
I am trying to apply a <a href="">CSS linear-gradient()</a> to the background of the body tag.
Here is the CSS I'm using:
<pre id="code">
document.getElementById("code").textContent = document.getElementsByTagName("style")[0].textContent;
The Syntax section in
<a href="">MDN</a>
says that I can specify multiple stops for the gradient, and that the
color-stop can have a specific length. Even though I specify a specific
length, it seems the gradient depends on the length of the body.
<li>I specified absolute lengths for the gradient</li>
<li>I expect the gradient to stay stable regardless of page length</li>
<li>But the gradient seems to change</li>
Am I doing something wrong, or is this a bug?
Thank you <a href="">@warrenhenning</a>!
I needed to put a "background-attachment: fixed" *after* the background specification