Showing Full Background Image In Div Tag In Bootstrap

Im using bootstrap to develop website. My website content - 3 fixed columns which consists of left side menu, center content, right side menu and also top banner. I want to display

Solution 1:

Here's one way to do this.

http://jsfiddle.net/3efxuvzv/4/

CSS

.content_area {
    width:100%;
    padding-top: 74.6691871456%;
    background: url(http://www.postfree108.com/images_postfree/Direct-marketing-12890.jpg) no-repeat top left;
    background-size: cover;
}
.content {
    margin-top: -74.6691871456%;
}

HTML

<divclass="content_area"><divclass="content"><!-- put your content here --></div></div>

Essentially, I put the actual html content in another wrapper, and used the fact that percentages for padding and margins even for top/bottom are calculated by the width of the element, to set a padding-top of the aspect ratio of your image (74.6691871456% = 395/529 - the dimensions of your background image), then on the content element offset the padding using negative the same amount of margin. Effectively this creates a min-height kind of effect based on your desired aspect ratio.