CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
bier hier
bier hier

Reputation: 22550

How can I display image behind div with bootstrap?

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

Upvotes: 1

Views: 2969

Answers (5)

Tushar
Tushar

Reputation: 4418

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

Upvotes: 1

Patrick Mlr
Patrick Mlr

Reputation: 2965

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.

Upvotes: 0

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

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

Upvotes: 0

shashik thiwanka
shashik thiwanka

Reputation: 81

use css to do that

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

i think this may be help you

Upvotes: 0

Quentin
Quentin

Reputation: 700

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*/
}

Upvotes: 0

Related Questions