组件封面完整浏览器中的背景图像

Question

好的，我在这里有些困惑。

我正在使用AngularJs，并尝试为一个特定组件而不是整个应用设置背景图像。并尝试使其涵盖浏览器的整个扩展。现在，它的底部（2）处留有空白，而屏幕较大时，此空白会更大。

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

紫色线只是显示容器的边界。

Component 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;
    }
}

Component 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从现在的位置交换到DIV，那里的infoUser是但没有任何变化。

Answer 1

您要覆盖浏览器屏幕整个高度的任何元素都必须为height：100％，而不是auto。但是，要使此功能正常运行，HTML，BODY和该元素的任何其他父容器也都需要高度：100％。

因此，fondo_seccion和infoUser以及所有父div，html和body都需要设置为height：100％。

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%;
}