组件覆盖完整浏览器中的背景图像

Question

好吧，伙计们，我在这里有点困惑。

我正在使用 AngularJs 并尝试为一个特定组件设置背景图像，而不是为整个应用程序设置背景图像。 并试图让它覆盖浏览器的全部范围。现在它在底部 (2) 留下一个空白区域，屏幕越大，这个空白区域越大。

As you can see in the image (the background image (1) gets cut where the container ends

紫线只是显示容器的边框。

组件CSS

.align-text-message{
    text-align: center;
}

.content-data{
    margin-left: 3%; 
    margin-top: 2%;
}

.fondo_seccion{
    background-image: url("../../assets/img/fondo_datos.png");
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0.75%;
}

.menu-dashboard{
    opacity: 0.9; 
    margin-top: -2%;
}

.infoUser{
    margin-top: 4%;
}

@media only screen and (max-width: 600px) {
    .content-data{
        margin-left: 0%;
        margin-top: 15%;
        z-index: -1;
        position: absolute;
    }

    .menu-dashboard{
        min-height: auto;
    }
}

组件 HTML

<div class="infoUser">
  <div class="row">
    <div class="col-md-10 menu-dashboard">
      <app-dashboard></app-dashboard>
    </div>
  </div>
  <div class="row fondo_seccion">
    <div class="col-md-11 content-data">

      <div class="form-group" [hidden]="!basicLevelFormComponent.userNoInfo">
        <div class="alert alert-warning align-text-message" role="alert">
          ¡A&uacute;n no ha ingresado su informaci&oacute;n!
        </div>
      </div>

      <div class="form-group" [hidden]="!basicLevelFormComponent.fatalError">
        <div class="alert alert-danger align-text-message" role="alert">
          ¡No hemos podido cargar su informaci&oacute;n!
        </div>
      </div>

      <div class="form-group" [hidden]="!basicLevelFormComponent.infoSuccess">
        <div class="alert alert-success align-text-message" role="alert">
          ¡Informaci&oacute;n actualizada!
        </div>
      </div>

      <div class="form-group" [hidden]="!basicLevelFormComponent.userNotify">
        <div class="alert alert-warning align-text-message" role="alert">
          {{basicLevelFormComponent.messageNotify}}
        </div>
      </div>

      <app-basic-level-form [hidden]="!showBasicLevelForm"></app-basic-level-form>
      <br/>
    </div>
  </div>
</div>

我尝试的其中一件事是将 fondo_seccion 从现在的位置交换到 infoUser 所在的 DIV，但没有任何变化。

Answer 1

您想要覆盖浏览器屏幕的整个高度的任何元素都需要是 height:100% 而不是 auto。但是，要使其正常工作，HTML、BODY 和该元素的任何其他父容器也需要为 height: 100%。

因此，fondo_seccion 和 infoUser 都需要设置为 height:100% 以及任何父 div 和 html 和 body。

html, body {
    height: 100%;
}

.fondo_seccion{
    background-image: url("../../assets/img/fondo_datos.png");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0.75%;
}

.infoUser{
    margin-top: 4%;
    height: 100%;
}