CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
kamusett
kamusett

Reputation: 1403

How to put background-image within col-md

To clarify my question, I'm gonna to attach the sketch image below:

Sketch

I'd like to put a background-image within of a col-md using twitter-bootstrap. The mainly question is how to put it within the col-md-7. The requisite to it, is the image must be visible on all place destinated to col-md-7, and that includes the 100% of height.

I'm beginner with twitter-bootstrap and I'm not sure if col-md class may have it height stretched to bottom of page. If no, what is the solution to solve this question using bootstrap?

Below my code:

index.html.erb

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-7">
          <div class="container-fluid css_image_home"></div>
        </div>
        <div class="col-md-5">
          ...
                </div>
    </div>
</div>

home.css.scss

div.css_image_home{
  position:absolute;
  background:url('images/wordcloud.jpg') no-repeat top left fixed;
}

I hope all the information required to solve this question was provided. If something is missing, please tell me and I'll provide faster as I can.

Best regards.

Upvotes: 3

Views: 3967

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

http://www.bootply.com/125213

Any containers of the DIV with the background image also need to be 100% height (body,html,.container-fluid,etc..)

html,body {
    height:100%;
}

.container-fluid,.col-md-7,.row {
    height:100%;
}

Also, there is no row-fluid in Bootstrap 3.

Upvotes: 1

Related Questions