title: container with background image and no content not displaying at all
body: <p>I have two separate non nested sections with a background image. The one displays the other does not. The one does not display because takes up no space even though a height is specified. When I put content in it, it shows, but only at the height of the content. So the bg image is not the problem. Both have no content except for an absolutely positioned item (which does not count as content to browser). The section that displays is inside a regular div. The section that does not display is inside of a flexbox. Don't know why that would make a difference. </p>
  
  <p>I've seen answers on the web and at stack overflow and they all consist of either changing the path of the background image to the correct one, or giving a height to the element with bg image. I already knew about both of those requirements and I have them in both tags (unless there's a typo). But it works in one, but not the other. Do I have a typo that I can't see from looking at it too much? Driving me nuts over what should be a simple thing. A second pair of eyes would be very helpful</p>
  
  <p>this works:</p>
  
  <pre><code>&lt;section class="headingImg"&gt;
     &lt;p class="container headerText"&gt;
         Increase your home's value&lt;br /&gt;and enchance your lifestyle
     &lt;/p&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Related styles. Container class attribute comes from bootstrap therefore not defined in css</p>
  
  <pre><code>.headerText {
      text-shadow: 2px 2px 2px #222;
      color:#f4e9da;
      font-size:36px;
      padding-top:235px;
      font-style:italic;
      line-height:36px;
  }
  
  .headingImg {
      background-image:url('images/browndeck.jpg');
      background-position: center;
      background-repeat:no-repeat;
      background-size:cover;
      height:350px;
      margin-bottom:40px
  }
  </code></pre>
  
  <p>this does not work because section with bgimage has no height even though one is specified</p>
  
  <pre><code>    &lt;div class="container"&gt;
          &lt;section class="flex"&gt;
              &lt;div class="flexDiv bgColor"&gt;
                  &lt;section id="kitchens" class="imgBoxSize cover relative"&gt;
                      &lt;h2 class="absCenter"&gt;Kitchens&lt;/h2&gt;
                  &lt;/section&gt;
                  &lt;p&gt;Enhance the lifestyle of your mice, cock roaches and flies&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Related styles</p>
  
  <pre><code>.bgColor{
      background-color:white;
  }
  
  .flex {
      display:flex;
      justify-content:space-around;
      flex-wrap:wrap;
  }
  
  .flexDiv {
      background-color:#CCC;
      width:30%;
      margin:0 auto;
  }
  
  #kitchens {
      background-image:url("images/kitchen1.jpg");
      background-repeat:no-repeat;
  }
  
  .imageBoxSize {
      height:200px;
      width:100%
  }
  
  .cover {
      background-size:cover;
      background-position:center;
  }
  
  .relative {
      position:relative
  }
  
  .absCenter {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin:auto;
  }
  </code></pre>