Как поместить фоновое изображение позади div

Question

Я пытаюсь поместить свой фон позади div, который содержит jumbotron, но div продолжает оставаться под фоновым изображением, вместо того, чтобы появляться на нем.Как мне это исправить?

PS: я не хочу помещать фоновое изображение в мой CSS-файл по некоторым причинам, поэтому я хочу, чтобы изображение src было только в моем HTML.Большое спасибо!

Вот мой код:

        <div class="container-fluid" >
         <img src='U_Thant_PIC_3.jpg'
            width='1400px' height='800px'/>

            <div class="jumbotron jumbotron-fluid">
                <center>
                    <h2 class="a">Cats are cool</h2>
                </center>

            </div>
</div>

Answer 1

Добавьте position: absolute; в class="jumbotron jumbotron-fluid" и переместите <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> в конец кода.

.box {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.jumbotron {
  color: white;
  position: absolute;
}

<div class="box">
  <div class="jumbotron">
    textbox
  </div>
  <img src="https://www.w3schools.com/css/img_lights.jpg">
</div>

Answer 2

Чтобы добиться этого, вы должны указать браузеру, чтобы элемент img располагался позади вашего ребенка div.Для этой цели вы можете использовать атрибут position, где img имеет меньшее значение z-index.

. z-index работает для этого, если у вас есть свойства position дляэлементы:

div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}

<div class="container-fluid" >
         <img src='https://www.w3schools.com/css/img_lights.jpg'
            width='1400px' height='800px'/>

            <div class="jumbotron jumbotron-fluid">
                <center>
                    <h2 class="a">Cats are cool</h2>
                </center>

            </div>
</div>

Answer 3

Вам нужно сначала установить родительский элемент с помощью position :lative;в этом случае вы должны добавить CSS ниже.

.container-fluid { position:relative }

, а затем вам нужно настроить jumbotron со следующим стилем.

.jumbotron { position: absolute }

с этим должно работать, также выможет перемещать .jumbotron с верхним, нижним, левым и правым положениями, например:

.jumbotron { position: absolute; top: 20px; left: 10px; }

Таким образом .jumbotron будет перемещаться в области с первым положением: относительный;приняты.В данном случае в области класса .container-liquid.

<div class="container-fluid" >
    <img src='https://www.w3schools.com/css/img_lights.jpg'
            width='1400px' height='800px'/>

    <div class="jumbotron jumbotron-fluid">
      <center>
         <h2 class="a">Cats are cool</h2>
      </center>

   </div>
</div>

Здесь я приведу вам пример: https://jsfiddle.net/mnL8cvf2/2/

Надеюсь, это поможет вам.

Answer 4

Попробуйте;

HTML

 <div class="container-fluid">
  <img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
  <div class="jumbotron jumbotron-fluid">
      <h2 class="a">Cats are cool
  </div>
</div>

CSS

.jumbotron {
    position: absolute;
    left: 50%;
}

Это даст вам центрированный текст поверх вашего изображения.