Why does the colorful background not cover my page completely when I scale down the window?

Question

I'm working on a webpage with dynamic change to gradient in the background.

There are two columns - one contains a photo of a phone, the other one - some text. When the webpage is on full screen, it looks as I want - the gradient layer covers the whole background (stretched to width/height) and photo is next to the text:

But when I scale down the webpage horizontally, the text goes under the image (which is fine), but the gradient does not cover the whole page, as seen here:

Here's the complete jsfiddle with my code: https://jsfiddle.net/cj37qamw/

I have - in the css stylesheet - the following code:

#gradient {
  width: 100%;
  height: 100vh;
}

so I thought it should work - but it doesn't.

Can you help me and tell why it doesn't work as it should?

Answer 1

CHANGED ANSWER AFTER COMMENTS:

It seems I found the solution: https://jsfiddle.net/xh7L4rvt/1/

1.) I changed the selector in the Javascript so that the gradient is applied to body instead of #gradient .

2.) In the CSS I changed this:

html,
body {
  background-color: #333;
  height: 100%;
  overflow: auto;
}

and

#gradient {
  width: 100%;
  height: 100%;
}

Answer 2

Add the html and body tag to have the same width and height as your #gradient ID:

 html, body, #gradient { width: 100%; height: vh%; } 

 var colors = new Array( [62,35,255], [60,255,60], [255,35,98], [45,175,230], [255,0,255], [255,128,0]); var step = 0; //color table indices for: // current color left // next color left // current color right // next color right var colorIndices = [0,1,2,3]; //transition speed var gradientSpeed = 0.002; function updateGradient() { if ( $===undefined ) return; var c0_0 = colors[colorIndices[0]]; var c0_1 = colors[colorIndices[1]]; var c1_0 = colors[colorIndices[2]]; var c1_1 = colors[colorIndices[3]]; var istep = 1 - step; var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); var color1 = "rgb("+r1+","+g1+","+b1+")"; var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); var color2 = "rgb("+r2+","+g2+","+b2+")"; $('#gradient').css({ background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}); step += gradientSpeed; if ( step >= 1 ) { step %= 1; colorIndices[0] = colorIndices[1]; colorIndices[2] = colorIndices[3]; //pick two new target color indices //do not pick the same as the current one colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; } } setInterval(updateGradient,10); 

 html, body { height: 100%; background-color: #333; } body { color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5); } /* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5); } .site-wrapper-inner { display: table-cell; vertical-align: top; } .cover-container { margin-right: auto; margin-left: auto; } /* Padding for spacing */ .inner { padding: 30px; } /* * Cover */ .cover { padding: 0 20px; } @media (min-width: 768px) { /* Start the vertical centering */ .site-wrapper-inner { vertical-align: middle; } /* Handle the widths */ .cover-container { width: 100%; /* Must be percentage or pixels for horizontal alignment */ } } @media (min-width: 992px) { .cover-container { width: 700px; } } #gradient { width: 100%; height: vh%; } @media only screen and (max-width: 500px) { /* change max with to your needings */ html, body { width: 100%; height: vh%; } } 

 <link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script> <div id="gradient"> <div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="inner cover"> <div class="col-md-6"> <img src="http://mockuphone.com/static/images/devices/apple-iphone6-gold-portrait.png" class="img-responsive"> </div> <div class="col-md-5"> <div class="description"> <h4>header</h4> <p>test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </p> </div> </div> </div> </div> </div> </div> </div> 

EDIT: added media query.