Фон не заполняет высоту окна

фоновое изображение моей сети не заполняет всю высоту окна, когда контента недостаточно, вот пример:

Без содержания:

С содержанием:

Фон не заполняет высоту окна

вот app.component.html:

<body>
  <!-- Background -->
  <div class = "bg">
    <!-- nav -->
    <app-navbar></app-navbar> 

    <!-- Logo -->
    <div style = "text-align:center">
      <img width = "200" alt = "BookCloud Logo" [routerLink] = "['/books']" src = "../assets/logo3.png">
    </div>

    <!-- App -->
    <div class = "container">
        <app-alert></app-alert>
      <router-outlet></router-outlet>
    </div>

  </div>
</body>

а вот app.component.css:

.container {
  width:100%;
  height:100%;
}

img {
  outline: none;
}

html, body{
  height: 100%;
}

.bg{
  position: relative;
  display:block;
  background: url('../assets/bg.jpg') no-repeat center center fixed;
  background-size: cover;
}

Что я делаю неправильно? Спасибо за прочтение.

css background angular-material

16.06.2019 18:02

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы css должны быть

.bg{
  position: relative;
  display:block;
  background: url('../assets/bg.jpg') no-repeat center center fixed;
  background-size: 100% 100%;
}

Если это не сработает, измените .bg на body.

Спасибо! Теперь начальная страница в порядке, но она не работает в компонентах, в которых вы должны прокручивать, как только вы прокручиваете фоновое изображение, перестает заполняться, как показано на изображениях.

— 16.06.2019 18:20

Неважно, я исправил это, добавив overflow: auto; Спасибо!

— 16.06.2019 18:42

16.06.2019 18:07