Reputation: 4565
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 the full background image in center content which is a blank div tag only. My problem is the background image don't fully covered the content and only a half of the image is shown. I have the following code in html and css :
index.html
<div class="img-responsive content_area"></div>
style.css
.content_area {
display:inline-block;
position:absolute;
width: 100%;
height: 100%;
background: url(../images/bg.png) no-repeat top left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Upvotes: 1
Views: 3744
Reputation: 3469
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
<div class="content_area">
<div class="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.
Upvotes: 1