Question

I want to create squared tiles with bootstrap col-*-* classes (for proper size) with background image and some text inside.

Now I use dummy block with

margin-top: 100%

Followed by block with content:

position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;

But when I set background image for that block it becomes very ugly, so I think I should use tag in order to properly resize image.

So I tried to make class like bgimage:

width: 100%;
object-fit: cover;

I also set overflow: hidden to parent block, but that did not help, image became nice, but now it goes out from my block.

Now I have 2 questions:

Is there a better way to set image to background in squared block to cover it?
How to make proper padding and margin for such blocks (top,left,bottom,right settings and no other way? need to be resized on small devices)?

Answer 1

To set the background image with text inside the squared thumbnail. You need to add one more div with position: absolute and background-size: cover

Check the example code at CODEPEN

HTML:

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

    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section1</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section3<br>para2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section4</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section1</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section3<br>para2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section4</a>
      <div class="square-img"></div>
    </div>

  </div>
</div>

CSS:

.margin-top {
  margin-top: 100%;
}

.square-text {
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 15px;
  right: 0;
  text-align: center;
  padding-top: calc(50% - 30px);
  z-index: 9;
  background: transparent;
  color: #fff;
}

.square-img {
  background: url('http://www.themdfactor.com/wp-content/uploads/2015/11/image7.jpg') no-repeat;
  position: absolute;
  top: 15px;
  bottom: 20px;
  left: 15px;
  right: 0;
  background-size: cover;
}

Hope it helps you Enjoy :)

Answer 2

If you gave example, It becomes easy to give solution of your problem.

For fit an image you can use img-responsive class of bootstrap. Or use this:

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

If you have the proper idea of Bootstrap Grid, then you will be able to design your own blocks as your wish. You can get help from this.

Bootstrap squared tiles with imgs

2 个答案: