Wie kann ich Bild hinter Div mit Bootstrap anzeigen?

Question

Ich habe 2 Reihen in meinem Container. In der zweiten Reihe habe ich 2 Elemente one und two. Jetzt versuche ich das Bild hinter diesen auch fast wie einen Hintergrund darzustellen. Dies ist der html:

<div class="container"> 
    <div class="row"> 
    <img src="someimageurl" alt="" /> 
    </div> 
    <div class="row"> 
    <div class="col-md-6">one</div> 
    <div class="col-md-6">two</div> 
    </div> 
</div> 

codepen

Answer 1

Ist Hintergrund-Bild, was Sie suchen?

HTML

<div id=RowDivWithBackground class=row> 
</div> 

CSS

.RowDivWithBackground { 
    background-image: url('url/to/image'); 
    other-css-do-dads /*Probably some rgba action*/ 
} 

Answer 2

Wenn Sie wirklich den img -tag verwenden müssen, versuchen position: fixed und z-index: -1 zu verwenden (oder -2, -3, ...)

.container { 
 
    border: 4px solid red; 
 
    position: relative; 
 
} 
 

 
#imageAsBackground { 
 
    z-index: -1; 
 
    position: fixed; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWTPbXeQy0Sy6xCbSwL_Vc4oQtMS-UNkUPOwRb3TxWHKKNlZ5Ycg" id="imageAsBackground" alt="" /> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-6">one</div> 
 
    <div class="col-md-6">two</div> 
 
    </div> 
 
</div>

Wenn Sie das Bild als echten Hintergrund verwenden könnten, versuchen Sie, dafür CSS zu verwenden.

Wie

.container{ 
 
    border: 4px solid red; 
 
} 
 

 
.coolBackground { 
 
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWTPbXeQy0Sy6xCbSwL_Vc4oQtMS-UNkUPOwRb3TxWHKKNlZ5Ycg"); 
 
    background-size: cover; 
 
}

<div class="container"> 
 
    <div class="row coolBackground"> 
 
    <div class="col-md-6">one</div> 
 
    <div class="col-md-6">two</div> 
 
    </div> 
 
</div>

background-size: cover; wird das Bild auf die width Ihrer div einzustellen.

Answer 3

Verwendung CSS zu tun, dass

#{your div ID}{ 
background-image: url("backgroundImage.png"); 
} 

ich denke, das Sie

helfen können

Answer 4

versuchen diesen Code

html

<div class="row"> 
    <div class="bg clearfix"> 
    <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium optio itaque quas ab facere, ipsa cumque consequatur nam id voluptatibus numquam, sapiente suscipit doloremque blanditiis non, ipsam sint vel molestias.</div> 
    <div class="col-md-6">two</div> 
    </div> 
    </div> 

css

.bg 
{ 
    background-image:url(http://data.whicdn.com/images/12849966/large.jpg); 
    background-position:center; 
    background-size:cover; 
} 

hoffe es hilft

Answer 5

Überprüfen Sie, ob er für Sie arbeitet.

CSS:

.container{ 
    border: 4px solid red; 
    position: relative; 
    overflow: hidden; 
} 
.contentBox { 
    min-height: 300px 
} 
.imgBox { 
    position: absolute; 
    top: 0; 
    let: 0; 
    width: 100%; 
    z-index: -1; 
} 
.imgBox img { 
    width: 100%; 
    margin: 0; 
} 

HTML:

<div class="container"> 

    <div class="row contentBox"> 
    <div class="col-md-6">one</div> 
    <div class="col-md-6">two</div> 
    </div> 
    <div class="imgBox row"> 
    <img src="imageURL.jpg" alt="" /> 
    </div> 
</div> 

enter link description here