Why does not the background color appear?

It does not disappear, what happens is that it goes without a reference to height when it is at all. You give 20% of nothing in height:20% , since the parent element .container does not have a defined height to serve with reference.

Maybe for what you want you should start by setting a height to .container , for example height: 500px; Here the option depends on what you want to do, but here is a chance for your code (change your code):

.container {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  position: relative;
  height:  500px;
}

I hope it helps!

The incompatibility occurs between position properties, defined as absolute , height , with relative values. This is because by using the position: absolute property you are removing the element from the natural display stream, being ignored by the later elements and ignoring properties of its parent element. Having a relative height would only make sense when the value is relative to the parent element property, since the element with position: absolute ignores such properties, it is not possible to have relative values.

  

This relation is reestablished if the parent element has position: relative and set an absolute value for the property that you want to keep as relative. In this case, it would suffice to add a height with an absolute value to .container that it would be possible to keep the height of .goncalo relative.

Just change the value of height property to an absolute value, such as 50 px, as in the example below, and you will see that it will work as expected.

body {
  background-image: url("imagens/fundo.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

.container {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  position: relative;
}

.logo {
  position: absolute;
  margin-top: 5%;
}

.bloco2 {
  position: absolute;
  background-color: #ABABAB;
  height: 2%;
  width: 2%;
  margin-top: 20%;
}

.linha1 {
  margin-left: 20%;
  background-color: #ABABAB;
  height: 5%;
  width: 20%;
  margin-top: 2%;
  position: absolute;
}

.online {
  margin-left: 60%;
  margin-top: 0%;
  position: absolute;
}

.jack {
  background-color: #ABABAB;
  height: 5%;
  max-width: 20%;
  margin-left: 80%;
  position: absolute;
}

.loginsteam {
  margin-left: 40%;
  position: absolute;
}

.menu {
  margin-top: 10%;
  position: absolute;
}

.goncalo {
  background-color: green;
  width: 10%;
  height: 50px;
  position: absolute;
}

<header>
  <div class="container">
    <div class="jack">
      Best Jackpot: Goncalo
    </div>
    <div class="online">
      <span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:18px; text-transform: uppercase;">Online:</span>
      <span style="color:#a9a9a9; font-family:proxima_nova_cn_rgregular,sans-serif; font-size:17px; text-transform: uppercase;"><b>20</b></span>
    </div>

    <div class="goncalo">
      Goncalo
    </div>
    <div class="logo">
      <img src="imagens/logo.png">
    </div>

    <div class="menu">
      Oi
    </div>
  </div>
</header>