Javascript animated background not covering whole screen

Question

I have used javascript to create an animated background to my website https://coolio85.com

This is my HTML Code where the color shifting is meant to take place

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<title>Welcome to coolio85.com</title>
<script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>

<script src="js/anibackground.js"></script>
</head>
<body>
<div id="gradient" />

This is the css to position the background to fit the full page

#gradient {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

This is the java script code to use the DIV Id

$('#gradient').css({
    background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

There is a black bar from the solid background color that the background is originally set at the top of the screen.

@TemaniAfif Sorry i'm new to this. What do you mean by that? — coolio85, Mar 29 '18 at 15:21
i mean that linear gradient cannot be animated by changing color .. so if you expect an animation, it won't happen — Temani Afif, Mar 29 '18 at 15:27
ok i see your issue ... it's not with the animation, and i has nothing to do with gradient also — Temani Afif, Mar 29 '18 at 15:30
it's the margin of h1 collapsing with body ... use `h1{margin:0}` — Temani Afif, Mar 29 '18 at 15:32

score -1 · Answer 1 · answered Mar 29 '18 at 15:27

-1

As I said in a comment, you can do something like that :

body {
  height: 100vh;
}

#gradient {
  height: 100%;
}

answered Mar 29 '18 at 15:27

Chaaampy

243
1
10

Javascript animated background not covering whole screen

1 Answers1