CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
markhorrocks
markhorrocks

Reputation: 1538

How to cover background images in Bootstrap 3 grids?

I'm trying to make a landing page using Bootstrap 3. I want a top image in a full width column with three images below it in columns across and no margins or borders so the images joins seamlessly.

I can get close but when I narrow the view port a space opens up between the top image an the ones below it.

Here is the URL:

Here is my code:

HTML:

<div class="container-fluid">
  <div class="row">      

    <div class="landing-col col-xs-12"></div>

  </div>

  <div class="row">

    <div class="first-col col-sm-4"></div>                      
    <div class="second-col col-sm-4"></div>           
    <div class="third-col col-sm-4"></div>

  </div>

</div>

CSS:

.landing-col {
   background: url('../images/99.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 500px; }

.first-col {
   background: url('../images/44.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
}

.second-col {
background: url('../images/33.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

.third-col {
background: url('../images/22.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

I have tried using min-width and max-width with 100% but they don't work for me.

A possibility might be to use a media query to get the exact width of the current grid and set the image width inside it to that width. Is this possible?

Upvotes: 12

Views: 41067

Answers (4)

Rakhat
Rakhat

Reputation: 4942

You can use block element with background image where height is set via padding-bottom with percentage value

.img {
    margin-right: -15px; // Remove right gap
    margin-left: -15px;  // Remove left gap
    padding-bottom: 62.5%; // ratio is 16:10
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

Example in Codepen

or with img elements (in this case your images should have the same dimensions)

Example in Codepen

Upvotes: 15

Wilf
Wilf

Reputation: 2315

Let's try these:

  1. Emerge "rows" into one.
  2. Add col-md-* into each column
  3. Decrease the landing-col height to 300px

HTML

<div class="container-fluid">
    <div class="row">
        <div class="landing-col col-md-12 col-xs-12"></div>
        <div class="first-col col-md-4 col-sm-4"></div>
        <div class="second-col col-md-4 col-sm-4"></div>
        <div class="third-col col-md-4 col-sm-4"></div>
    </div>
</div>

CSS

.landing-col {
    background: url('http://sample.trainingdata.com.au/images/99.jpg') no-repeat;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
    margin:0;
    padding:0px;
}

Demo here=> http://fiddle.jshell.net/nobuts/7x0rpn5y/12/show/light/.

Upvotes: 7

Chris
Chris

Reputation: 453

You could always add a transparent image placeholder inside the div to hold the container, and then set an auto height on the containing div 'col-xs-12'. This will still enable you to use a background image with the cover attribute which will fill the area on narrower columns.

Upvotes: 2

Kamil
Kamil

Reputation: 2005

Do you really need to use top image as a background of the div? Try this code instead of your <div class="landing-col col-xs-12"></div>:

<div class="landing-col col-xs-12">
    <img src="images/99.jpg">
</div>

After that all properties you will need is:

.landing-col { padding: 0px; } // resets .col-xs-12 padding-right and padding-left

.landing-col img { width:100%; }

Upvotes: 0

Related Questions