Фоновое изображение в компоненте полностью покрывает браузер

Question

Хорошо, ребята, я немного запутался здесь.

Я работаю с AngularJs и пытаюсь установить фоновое изображение для одного конкретного компонента, а не для всего приложения. И пытается это охватить весь браузер. Прямо сейчас он оставляет пустое пространство внизу (2), а на больших экранах это белое пространство больше.

Как вы можете видеть на изображении (фоновое изображение (1) обрезается) где заканчивается контейнер

Фиолетовая линия - это просто граница для отображения контейнера.

Компонент 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 с того места, где он находится сейчас, на DIV, где находится infoUser, но ничего не меняется.

Answer 1

Любой элемент, который вы хотите покрыть на всю высоту экрана браузера, должен иметь высоту: 100%, а не авто. Однако, чтобы это работало HTML, BODY и любой другой родительский контейнер этого элемента также должны были бы иметь высоту: 100%.

Так что fondo_seccion и infoUser оба должны быть установлены на высоту: 100% вдоль с любыми родительскими элементами и html и телом.

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