Bootstrap place img on background to full width of the window under grid with dynamic height

Question

I'm trying to place a background image so it will fit the full width of the page, and support the content of the bootstrap grid (not fixed height), while my container has a fixed width.

I've tried to use 2 approches :

As background url
As img element with position absolute with 100% width

The first option the img doesn't cover all of the content and in the second option the img does not support dynamic height.

Is there a way to achieve what I want or it is just not possible when the .container class has fixed width? Is there a better way?

Plunker example

/* Styles go here */

.container {
  width: 300px;
  text-align: center;
  color: white;
}
.myImg {
  background: url('http://data.whicdn.com/images/10274608/large.jpg');
  background-size: cover;
  width: 100%;
  height: auto;
}

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="myImg">
      <div class="row">
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
        <div class="col-lg-12">
          SOME CONTENT
        </div>
      </div>
    </div>
  </div>

  <hr/>

  <div class="container">
    <img class="myRegularImg" src="http://data.whicdn.com/images/10274608/large.jpg" style='position: absolute;  width:100%;  left:0px;' />

    <div class="row" style="position:relative">
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>
      <div class="col-lg-12">
        SOME CONTENT
      </div>

    </div>


  </div>
</body>

</html>

It is not a duplicate of - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen as it does not support a varible height, only fixed height. — Ziv Weissman, Aug 16 '16 at 13:57
Why you don't use vh(viewport height) and vw(viewport width) units? They are relative units for responsive layout. — Teuta Koraqi, Aug 16 '16 at 14:00
They get resizing depending on viewport. I don't think they would cause you a problem. — Teuta Koraqi, Aug 16 '16 at 14:02
Yes but I don't want precentage of the viewport, I want the image to cover all of the text. The text can be 3 lines, or 10 lines, I want the background to strech to cover all of the text, regardless of the viewport @TeutaKoraqi — Ziv Weissman, Aug 16 '16 at 14:06
You cannot achieve full width background image, cus container has fixed width, but create another div and another this div add container. Give this div full width and add background image — Teuta Koraqi, Aug 16 '16 at 14:14
Can you undo the duplicate? it is not the same question @Paulie_D — Ziv Weissman, Aug 16 '16 at 14:17
It is a duplicate and the answer supports dynamic heights. The demo has fixed heights just for **demo** purposes. — Paulie_D, Aug 16 '16 at 14:20
@ZivWeissman, are looking for something like this: http://jsfiddle.net/BfLAh/2948/ — Teuta Koraqi, Aug 16 '16 at 14:22

Bootstrap place img on background to full width of the window under grid with dynamic height

0 Answers0