Как добавить фоновое изображение в строку с помощью начальной загрузки 4

Question

Я пытался добавить фоновое изображение в класс строк из начальной загрузки 4.1, но не смог даже отобразить изображение где-нибудь на странице.Любое решение, которое я видел онлайн, не сработало.

Я использую

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css\overwrite.css">

, и все ссылки JS находятся в конце моего тега body.

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Вот мой HTML-код

<div id ="diagL" class ="row text-center">
<div class ="col-sm-6">
  <p id="txtzoom" class ="display-1 font-weight-bold">ART.</p>
</div>
<div class ="col-sm-6">
  <p id="txtzoom" class ="display-1 font-weight-bold text-warning">SCIENCE.</p>
</div>

Что касается моего кода CSS, я изменял его снова и снова, пытаясь заставить изображение отображаться

#diagL{
 z-index:99;
 position:absolute;
 background: transparent !important;
 background: url("../images/BG/DiagnolL.jpg") !important;
 background: no-repeat !important;
 background: center center;
 background: cover !important;
}

Вещи, которые я пробовал:

• Использование другого контейнера, такого как: контейнер, контейнер-жидкость, d-flex или просто просто div самостоятельно.

• Попытка URL () моего изображения по-другому, например: url ("/ images / BG / DiagnolL.jpg") Это точный каталог, скопированный из "Копировать путь проекта"

• Попытка добавить CSS непосредственно в html-строку "style = '...'"

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

При этом pДа, я полагаю, что перепробовал все, кроме попыток использовать javascript, но я не был бы полностью уверен, как это применить.Если бы кто-то мог сообщить мне, если это невозможно, чтобы я мог пойти дальше и попробовать что-то еще, я был бы очень признателен.

Answer 1

Почему вы используете

background: transparent !important
background: url("../images/BG/DiagnolL.jpg") !important;

Если бы я был вами, я бы сначала проверил это.Прозрачный фон перед URL.Оба !important Один или другой.Фон не может быть прозрачным и видимым [!important tag] одновременно.В случае сомнений первый вариант идет первым, второй игнорируется.

Answer 2

Вы использовали неверные css свойства.Используйте background-repeat, background-size и background-position для no-repeat, size и position фона соответственно.Тем не менее, лучше использовать сокращенный фон.

.row {
  background: url('#path') center / cover no-repeat;
}

Самое главное, вы не должны изменять position изображения и, следовательно, удалять position:absolute.Также может быть проблема с путем img.

.row {
  background: url('https://upload.wikimedia.org/wikipedia/commons/c/ca/The_Sky_Garden.jpg');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis excepturi nesciunt facere magni ratione quaerat quo, quisquam blanditiis reiciendis a facilis accusamus ad dolore voluptatibus quam iusto asperiores aliquam nisi. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Quas eos ipsum corrupti dolore dolor placeat maxime, consequatur voluptate unde possimus optio veritatis architecto reiciendis nulla rerum dolorem a, voluptates non.
      </p>
    </div>
    <div class="col">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis sed nobis ratione natus exercitationem dolores suscipit dolore ab voluptatum expedita quo facilis laboriosam, soluta molestias nemo, possimus excepturi nihil odio! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Quas eaque quae id, nam harum assumenda libero molestias aperiam corrupti consequatur, est doloribus vel corporis, ad consequuntur iure tenetur eum commodi!

    </div>
  </div>
</div>

Проверьте код в полноэкранном режиме

---

Вы можете найти этот пост на css-tricks полезным