-1

i tried this but it only works when the screen is before the vertical scroller appears, and then when you scroll down the background color is back to white.

.background {
  min-height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  z-index: -9999;
  background-color: red;
}
<div class="background"></div>
gdsd asgga
  • 77
  • 7

1 Answers1

0

The problem is that by default body has padding.

"Manjuboyz" solution works to an extent but a globally applied style might cause issues in the future.

This snippet will fix it by removing the default body padding:

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <style>
        body{
            padding:0;
            margin: 0;
        }
        .background {
          min-height: 100vh;
          width: 100vw;
          position: absolute;
          top: 0;
          z-index: -9999;
          background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="background"></div>
</body>
</html>

If your page is too long however, you will need the position: fixed property, this makes sure that the div will follow the rendered view area on their device by 'fixing' it to the visible view-able screen. W3 has some good examples of it.

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <style>
        body{
            padding:0;
            margin: 0;
        }
        .background {
          min-height: 100vh;
          width: 100vw;
          position: fixed;
          top: 0;
          z-index: -9999;
          background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="background"></div>
</body>
</html>