title: Css div float on the flex backgroud image
body: <p>I want the div class item2 float on the backgroud image,
  but it fails. How can I solve this?</p>
  
  <p><a href="https://codepen.io/robinnpca/pen/QXKrON" rel="nofollow noreferrer">https://codepen.io/robinnpca/pen/QXKrON</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="flex_img" &gt;
        &lt;div class="item2 "&gt;
          &lt;div &gt;up1&lt;/div&gt;
          &lt;div &gt;up2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item2 "&gt;
          &lt;div &gt;down1&lt;/div&gt;
          &lt;div &gt;down2&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.item2{
    flex: 1 1 100%;
    background-color: #f08bc3;
     display: flex;
    justify-content: space-between;
  }
  
  .flex_img {
    flex: 0 0 100%;
    background-color: #f08bc3;
    width:100%;
    height:175px;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-content:space-between;
    background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                    url("https://mdn.mozillademos.org/files/7693/catfront.png");
    background-color: transparent;
    background-position: center;
    background-position:left; 
  }
  </code></pre>
  
  <p>below is I want
  <a href="https://i.stack.imgur.com/CHCQ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CHCQ8.png" alt="enter image description here"></a></p>