My background CSS gradient is not displaying properly when using jQuery for a drop-down menu. The background appears to be repeating.
Here are the body properties:
html {
height: 100%;
}
body {
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background: #639964; /* Old browsers */
background: -moz-linear-gradient(-45deg, #639964 25%, #402180 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(25%,#639964), color-stop(94%,#402180)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #639964 25%,#402180 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #639964 25%,#402180 94%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #639964 25%,#402180 94%); /* IE10+ */
background: linear-gradient(135deg, #639964 25%,#402180 94%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#639964', endColorstr='#402180',GradientType=1); /* IE6-9 fallback on horizontal gradient */
color: #fff;
font-family: 'Special Elite', cursive;
margin: 0;
}
I have included the full code in Codepen.
If anyone could help me identify what I am doing incorrectly, it would be greatly appreciated!
Thank you!