How can I display image behind div with bootstrap? - html

Question

I have 2 rows in my container. In the second row I have 2 elements one and two. Now I am trying to display the image behind those too almost like a background. This is the 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

Check if his works for you.
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

Answer 2

Is background-image what you're looking for?
HTML
<div id=RowDivWithBackground class=row>
</div>
CSS
.RowDivWithBackground {
background-image: url('url/to/image');
other-css-do-dads /*Probably some rgba action*/
}

Answer 3

use css to do that
#{your div ID}{
background-image: url("backgroundImage.png");
}
i think this may be help you

Answer 4

try this 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;
}
hope it helps

Answer 5

If you really need to use the img-tag, try to use position: fixed and z-index: -1 (or -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>
If you could use the image as a real background, try to use css for this then.
Like
.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; will adjust the image to the width of your div.