Ovidiu G Ovidiu G - 4 months ago 9
CSS Question

Positioning issue on mobile

I'm trying to build an html template from a psd design and I started mobile first doing pretty good so far with one issue.
I have this image which I positioned absolute in order to achive this effect. ( Image attached)
The thing is now that I got the image working the button for the collapse menu is not working anymore and neither the brand link. What I'm assuming is that the menu and brand are behind the image and that might cause the problem but I tried z-index to get it up front and is still the same..

I have a container for the image which has a 250px height because I wanted the image to fill this.. I got it to fill the container but it looked squeezed and I didn't know how to fix it..

HTML:

<!-- start mobile-img -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="top-img-container">
<h1 class="img-caption">Bodybuilding is good for your health</h1>
<img class="img-fluid center-block top-img hidden-sm-up" src="images/slider-01.jpg" alt="Image">
</div>
</div>
</div>
</div>
<!-- end mobile-img -->


CSS:

.top-img-container{
padding-top: 60px;
height: 250px;
min-width: 100%;
position: relative;;
}

.top-img{
position: absolute;
top:0;
left: 0;
padding-top: 60px;
min-width: 100%;
}

Answer

Since object-fit has really bad browser support, and as you have a given height, do like this, where you use a div instead.

The background-image can of course be set in the CSS as well, though sometimes the resource gets set in the markup, hence showing that as one way, often missed when replacing an img with a div.

.top-img-container{
  padding-top: 60px;
  height: 250px;
  min-width: 100%;
  position: relative;;
}

.top-img{
  height: 100%;
  background-size: cover;
  background-position: center;
}
<!-- start mobile-img -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="top-img-container">
          <h1 class="img-caption">Bodybuilding is good for your health</h1>
          <div class="img-fluid center-block top-img hidden-sm-up" style="background-image: url(http://f.tqn.com/y/bodybuilding/1/W/K/7/GettyImages-73539617.jpg)"></div>
        </div>
      </div>
    </div>
  </div>
<!-- end mobile-img -->