Background Gradient Property Is Not Working

Can someone explain why isn't my Background Gradient property is not working. How to achieve the background gradient without altering the position property? NOTE : When I remove t

Solution 1:

Here your are facing two issues. First you have to consider that by making the .parent element absolute position, you remove it from the flow and since it's the only child of the body this one will have a height equal to 0.

Considering this the background may still work in some cases. If you use a background-color or a background-image you will be able to see them even if you have height equal to 0:

body {
  background: red;
  margin:0;
}

body {
  background: url(http://lorempixel.com/g/400/200/);
  margin:0;
}

Why you can see this even if the body has 0 height?

Because there is a special behavior of the background of the body that is getting propagated to html and then to canvas, so in reality it's not the background of body that you see but of the canvas. As you can read here:

The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas.

And

For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element

Now, why this is not working with gradient?

Simply because in your case body has height 0 and also html has height 0 since you removed the default margin and there is no in-flow element. In addition, you need to consider Intrinsic dimensions and proportions. As you can read here:

A bitmap image (such as JPG) always has intrinsic dimensions and proportions.

A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.

CSS <gradient>s have no intrinsic dimensions or intrinsic proportions.

So if there is no size defined for gradient it will have an auto size which in your case is equal to 0 so we cannot see it.

Here is an example to illustrate this with an image:

body {
 margin:0;
 background-image:url(https://lorempixel.com/g/400/200/);
 background-size:100px 20px;
 animation:anime 2s infinite linear;
}

@keyframes anime {
   from {
    background-size:100px 20px;
   }
   to {
   background-size:100px 0px;
   }

}

The background is still visible because it get repeated until we have a size equal to 0. Same logic will apply to gradient but it's difficult to see it when you use to right as direction because the repeat will create the illusion of a continuous background.

body {
  margin: 0;
  background-image: linear-gradient(to right, blue, red);
  background-size: 100% 20px;
  animation: anime 2s infinite linear;
}

@keyframes anime {
  from {
    background-size: 100% 20px;
  }
  to {
    background-size: 100% 0px;
  }
}

And it's more clear with to bottom direction!

body {
  margin: 0;
  background-image: linear-gradient(to bottom, blue, red);
  background-size: 100% 20px;
  animation: anime 2s infinite linear;
}

@keyframes anime {
  from {
    background-size: 100% 20px;
  }
  to {
    background-size: 100% 0px;
  }
}

That's why if you remove the position, your body will have a height, gradient will be visible because he will be auto sized to fit the body and it will be propagated to cover the full screen.

Solution 2:

The body element has no height. That is why your gradient is not working. Also use -moz- and webkit.

var drop = document.querySelector(".drop");

var button = document.querySelector(".button");

button.addEventListener("click", function(){
	drop.classList.toggle("animation");
});

body, html{
	margin: 0;
	padding: 0;
}

body{
background: rgb(#f98866);
background: -moz-linear-gradient(to right, #f98866, #ffffff);
background: -webkit-linear-gradient(to right, #f98866, #ffffff);
background: -o-linear-gradient(to right, #f98866, #ffffff);
background: -ms-linear-gradient(to right, #f98866, #ffffff);
background: linear-gradient(to right, #f98866, #ffffff);
height:100vh;
}

.parent{
position:absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	perspective: 1000px;

}

ul{
	padding: 0;
	margin: 0;
	margin-top: 10px;
}

li{
	list-style: none;
	padding: 15px 70px;
	background: #80bd9e;
	color: #fff;
	font-family: monospace;
	text-align: center;
	transition: 0.3s;

}

li:hover{
	background: #89da59;
	transform: skewX(-10deg);
}

a{
	text-decoration: none;
	color: #000;
}

.button{
	padding: 20px 70px;
	background: #ff420e;
	color: #fff;
	font-family: monospace;
	font-size: 1.5em;
	transition: 0.4s;
}

.button:hover{
	cursor: pointer;
}

.animation{
	transform: rotateX(-88deg);
	opacity: 0;
}

.button:hover{
	transform: rotateY(10deg);
}

.drop{
	transition: 1s;
}

<!DOCTYPE html>
<html>
<head>
	<title>3D dropdown</title>
</head>
<body>
	<div class="parent">
		<div class="button">Click Me!</div>
		<div class="drop animation">
			<ul>
				<a href="#"><li>Option</li></a>
				<a href="#"><li>Option</li></a>
				<a href="#"><li>Option</li></a>
				<a href="#"><li>Option</li></a>
			</ul>
		</div>
	</div>
</body>
</html>