Background image Z-index
<p>I have an accordion menu that slides down over another container that has a background image.  When the menu is opened it pushes the background image down the page.  I've tried playing around with z-index and also changing the containers background url to an img tag on the html file, but still no luck.  Any advice?</p>

<pre><code>&lt;!--Dropdown menu on mobile--&gt;
&lt;div ng-hide="burgerChangeToX" class="nav_dropdown_mobile"&gt;
  &lt;a ui-sref-active="selected" ui-sref="home"&gt;Home&lt;/a&gt;
  &lt;a ui-sref-active="selected" ui-sref="about"&gt;About&lt;/a&gt;
  &lt;a ui-sref-active="selected" ui-sref="skills"&gt;Skills&lt;/a&gt;
  &lt;a  ui-sref-active="selected"ui-sref="work"&gt;Work&lt;/a&gt;
  &lt;a ui-sref-active="selected" ui-sref="fun"&gt;Fun&lt;/a&gt;
&lt;/div&gt;

&lt;!-- background image --&gt;
&lt;div class="background_container"&gt;
  &lt;div class="background_mobile"&gt;&lt;/div&gt;
&lt;/div&gt;

/*Mobile navbar dropdown*/
.nav_dropdown_mobile {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    overflow: auto;
    font-size: 40px;
    margin-top: 0px;
    transition: margin-top .75s ease;
    font-family: Yantramanav;
    z-index: 5;
}

/* container with background image */
.background_mobile {
    background: url('../img/Wolf_blue.svg');
    background-size: cover;
    background-repeat: no-repeat;
    width: 90%;
    height: 58vh;
    margin-top: 50px;
    z-index: 1;
}
</code></pre>