ブートストラップ付きZ-インデックス：テキストの前にまだ画像があります

イメージはテキスト形式の背後にあるが、ラベルのみが表示される私のサイトにはインスタンスがあります。適切なdivのインラインでz-indexを設定し（CSSを使用する代わりに）、サイト全体でbootstrapを使用します。 erbは、このようなものです：ブートストラップ付きZ-インデックス：テキストの前にまだ画像があります

<div style="width: 100%; z-index: 0 !important"> 
    <%= image_tag 'background_new_recipe.jpg', style: "height: 100vh" %> 
</div> 

<div class="container" style="height: 500px; margin-top: -500px; z-index: 100 !important"> 
    <%= form_for @recipe do |f| %> 
    <%= f.label "Recipe Name" %> 
    <%= f.text_field :name, class: "form-control" %> 

    <%= f.label "Steps to Deliciousness" %> 
    <%= f.text_area :instructions, class: "form-control", style: "height: 300px" %> 

    <%= f.label "This Recipe Works With:" %> 

    <div class="field"> 
     <%= f.check_box :chicken %> 
     <%= f.label "Chicken", style: "margin-left: 10px; color: red" %> 
    </div> 

    <div class="field"> 
     <%= f.check_box :beef %> 
     <%= f.label "Beef", style: "margin-left: 10px; color: red" %> 
    </div> 

    <div class="field"> 
     <%= f.check_box :fish %> 
     <%= f.label "Fish", style: "margin-left: 10px; color: red" %> 
    </div> 

    <div class="field"> 
     <%= f.check_box :other_meat %> 
     <%= f.label "Other Types of Meat", style: "margin-left: 10px; color: red" %> 
    </div> 

    <div class="field"> 
     <%= f.check_box :veggies %> 
     <%= f.label "Vegetables", style: "margin-left: 10px; color: red" %> 
    </div> 

    <div class="text-center"><%= f.submit "Share My Delicious Creation", action: :create, class: "btn btn-manly" %></div> 
    <% end %> 
</div> <!-- container -->

そして今、次のようにレンダリングされます。これは、正しく表示するために取得する方法