Problem z tłem zajmującym 100% ekranu(css)

pytanie zadane 22 października 2018 w HTML i CSS przez Scypyon Gaduła (3,450 p.)

/*
font-family: 'Shadows Into Light', cursive;
font-family: 'Permanent Marker', cursive;
font-family: 'Diplomata', cursive;
font-family: 'Loved by the King', cursive;
font-family: 'Neuton', serif;
font-family: 'Lusitana', serif;
*/

body
{
  margin:0;
}
.wrapper
{
  background-image: url(img/ronaldo-de-oliveira-1108926-unsplash.jpg);
  display: block;
  background-size: cover;
  position: absolute;
  overflow: auto;
  height: 100%;
  width: 99%;
}

.wrapper .nav
{
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 55% 5%;
  font-size: 20px;
  color: white;
  font-family: 'Loved by the King', cursive;
  text-align: center;
}

.wrapper .logo
{
  margin-top: 20%;
  display: grid;
  grid-template-columns: 30% 40% 30%;
  font-size: 60px;
  color:white;
  font-family: 'Loved by the King', cursive;
  text-align: center;
}

.wrapper .logo-pdt
{
  text-transform: uppercase;
  font-size:20px;
  color: #C35C6F;
  display: grid;
  grid-template-columns:55% 10% 35%;
  font-family: 'Permanent Marker', cursive;
  text-align: center;
}

.wrapper .scroll-bar
{
  margin-top: 12%;
  display: grid;
  grid-template-columns: 48% 4% 48%;
  font-size: 10px;
  color: #C35C6F;
  font-family: 'Diplomata', cursive;
  text-align: center;

}

.content
{
  background-image: url(img/bryan-hanson-1109185-unsplash.jpg);
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Diplomata|Loved+by+the+King|Lusitana|Neuton|Permanent+Marker|Shadows+Into+Light" rel="stylesheet">
  <title>CSS Grid</title>
</head>
<body>
  <div class="wrapper">
    <div class="nav">
      <div>SCYPYON</div>
      <div>O Mnie</div>
      <div>Moje Umiejętności</div>
      <div>Kontakt</div>
      <div></div>
      <div>PL/EN</div>
    </div>
    <div class="logo">
      <div></div>
      <div><b><span style="color:#C35C6F;">&#60;</span>Lorem
        <span style="color:#CADC79;">Lorem</span>
        <span style="color:#C35C6F;">/&#62;</span></b></div>
      <div></div>
    </div>
    <div class="logo-pdt">
      <div></div>
      <div><i><b>&#60;webdeveloper/&#62;</b></i></div>
      <div></div>
    </div>
    <div class="scroll-bar">
      <div></div>
      <div>S</div>
      <div></div>
      <div></div>
      <div>C</div>
      <div></div>
      <div></div>
      <div>R</div>
      <div></div>
      <div></div>
      <div>O</div>
      <div></div>
      <div></div>
      <div>L</div>
      <div></div>
      <div></div>
      <div>B</div>
      <div></div>
      <div></div>
      <div>A</div>
      <div></div>
      <div></div>
      <div>R</div>
      <div></div>
      <div></div>
      <div style="font-size:40px;">&darr;</div>
      <div></div>
    </div>
  </div>
  <div class="content">
    
  </div>
</body>
</html>

A więc na czym polega problem: Z efektem ,aby obrazek zajmował 100% ekranu nie miałem problemu ale potem ,aby zrobić jakieś nowe tło jest problem ;d Nie wiem czy dobrze to wytłumaczyłem :) W razie czego sprecyzuje