Установите фон тела на изображение при использовании Bootstrap 5

Мне интересно, как установить фон всей веб-страницы (тело) в виде изображения. В идеале я хотел бы немного приглушить изображение, чтобы оно не было слишком большим.

<style>
    body {
        background-image:url("{% static 'portfolio/cherry_blossoms.jpg' %}"),
    }
</style>

Я попытался добавить это в тело html, но это не дало результата. Обратите внимание, что я использую Bootstrap 5.

<div class="bg-image" 
     style="background-image: url('https://mdbootstrap.com/img/new/standard/city/041.jpg');
            height: 100vh">
</div>

Вышеприведенный фрагмент кода представляет собой способ добавления общего фона на веб-страницу. Используемое изображение является примером того, как будет выглядеть результат.

Если вы посмотрите на height: 100vh;, это, по сути, говорит "использовать 100% доступной высоты", а vh - это viewport

Теперь вы хотите сделать его блеклым, вот пример блеклого фона в bootstrap

.covered {
  position: relative;
  /* make a new "render context", so absolute positioning is relative to this parent container */
  padding: 30px;
  /* only needed for this demo */
}

.covered-img {
  background: url('https://farm3.staticflickr.com/2672/3868702369_67d72be6e8.jpg');
  opacity: .25;
  background-size: cover;
  /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position: center;
  /* vs the top-left that is default */
  position: absolute;
  /* take me out of the render context! let me define my own positioning */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* this could also work with width:100%; height:100%;, but is simpler */
}
<div class="row">
  <div class="col-xs-12 covered">
    <div class="covered-img"></div>

    <p>Placeholder Text
      <p>
  </div>
</div>

По мнению отзывчивого пользователя Stack overflow, код можно объяснить следующим образом

Как это работает: Помещая img в качестве первого дочернего элемента в родительский контейнер, он рисуется первым. Абсолютное позиционирование гарантирует, что он заполнит размер родительского контейнера, а относительное положение контейнера означает, что дочерние элементы будут располагаться относительно родительского контейнера. (В противном случае изображение было бы абсолютным по отношению к телу и заполнило бы все окно). Затем рисуется Текст, и поскольку он определен после изображения, рендеринг выполняется следующим, рисуя поверх изображения.

Теперь давайте применим этот блеклый стиль к фоновому изображению

.covered {
  position: relative;
  /* make a new "render context", so absolute positioning is relative to this parent container */
}

.covered-img {
  background: url('https://mdbootstrap.com/img/new/standard/city/041.jpg');
  opacity: .25;
  height: 100vh;
  background-size: cover;
  /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position: center;
  /* vs the top-left that is default */
  position: absolute;
  /* take me out of the render context! let me define my own positioning */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* this could also work with width:100%; height:100%;, but is simpler */
}
<div class="row">
  <div class="col-xs-12 covered">
    <div class="covered-img"></div>
    <p>Placeholder Text
      <p>
  </div>
</div>

Вот полезная статья о Bootstrap 5 Image Backgrounds!

Вернуться на верх