メニュー間にヘッダーイメージを追加します

Question

メニュー間にヘッダーイメージを追加しようとしていますが、なぜ表示されないのかわかりません。 なぜ私はグラデーションカラーをhref thatsに置いているのかわかりません。ヘッダーイメージがグラデーションの背後にあるのはなぜですか。 リンク間にヘッダーイメージを表示する最良の方法をお手伝いできますか？

/** Header Menu **/ 
 

 
.logo_middle { 
 
    padding-top: 100px; 
 
} 
 

 
.header_menu { 
 
    margin-top: -41px; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    list-style: none; 
 
    background: url(../icons/header_div_image.png); 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
} 
 

 
.menu li a { 
 
    display: block; 
 
    float: left; 
 
    width: 20%; 
 
    padding: 10px; 
 
    text-align: center; 
 
    font-family: 'Oswald', Helvetida Neue, sans-serif; 
 
    font-weight: 300; 
 
    font-size: 25px; 
 
    letter-spacing: 1px; 
 
    color: #ededed; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .25); 
 
    background: #000000; 
 
    /* Old Browsers */ 
 
    background: -webkit-linear-gradient(top, #575656, #000000); 
 
    /*Safari 5.1-6*/ 
 
    background: -o-linear-gradient(top, #575656, #000000); 
 
    /*Opera 11.1-12*/ 
 
    background: -moz-linear-gradient(top, #575656, #000000); 
 
    /*Fx 3.6-15*/ 
 
    background: linear-gradient(to bottom, #575656, #000000); 
 
    /*Standard*/ 
 
} 
 

 
.menu li a.active, 
 
a:active, 
 
a:focus, 
 
a:hover { 
 
    color: #fff; 
 
} 
 

 
.menu { 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    border: 3px solid #f1c779; 
 
} 
 

 
.menu li a:hover { 
 
    text-decoration: none; 
 
    box-shadow: inset 0 0 220px 0 #070707; 
 
    margin: 0px 0 0 0; 
 
    transition: .25s; 
 
    -webkit-transition: all ease 0.8s; 
 
    -moz-transition: all ease 0.8s; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.menu h5 { 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
.icon1 { 
 
    height: 83px; 
 
    background-image: url(../icons/icon1.png); 
 
    background-position: 47px 0; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 

 
.icon2 { 
 
    height: 83px; 
 
    background-image: url(../icons/icon2.png); 
 
    background-position: 53px 0; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 

 

 
/** Header Menu Close **/

<div class="container header_menu hidden-xs hidden-sm"> 
 
    <div class="col-lg-12"> 
 
    <ul class="menu"> 
 
     <li> 
 
     <a href="/"> 
 
      <h5><span class="icon1"></span></h5>CASINO</a> 
 
     </li> 
 
     <li> 
 
     <a href="/slots"> 
 
      <h5><span class="icon2"></span></h5>SLOTS</a> 
 
     </li> 
 

 
    </ul> 
 

 
    </div> 
 
</div>

Answer 1

/** Header Menu **/ 
 

 
.logo_middle { 
 
    padding-top: 100px; 
 
} 
 

 
.header_menu { 
 
    margin-top: -41px; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu li { 
 
    list-style: none; 
 
    background: url(../icons/header_div_image.png); 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
} 
 

 
.menu li a { 
 
    display: block; 
 
    float: left; 
 
    width: 20%; 
 
    padding: 10px; 
 
    text-align: center; 
 
    font-family: 'Oswald', Helvetida Neue, sans-serif; 
 
    font-weight: 300; 
 
    font-size: 25px; 
 
    letter-spacing: 1px; 
 
    color: #ededed; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .25); 
 
    background: #000000; 
 
    /* Old Browsers */ 
 
    background: -webkit-linear-gradient(top, #575656, #000000); 
 
    /*Safari 5.1-6*/ 
 
    background: -o-linear-gradient(top, #575656, #000000); 
 
    /*Opera 11.1-12*/ 
 
    background: -moz-linear-gradient(top, #575656, #000000); 
 
    /*Fx 3.6-15*/ 
 
    background: linear-gradient(to bottom, #575656, #000000); 
 
    /*Standard*/ 
 
    border-right:3px solid #fff; 
 
} 
 

 
.menu li a.active, 
 
a:active, 
 
a:focus, 
 
a:hover { 
 
    color: #fff; 
 
} 
 

 
.menu { 
 
    border-radius: 10px; 
 
    overflow: hidden; 
 
    border: 3px solid #f1c779; 
 
} 
 

 
.menu li a:hover { 
 
    text-decoration: none; 
 
    box-shadow: inset 0 0 220px 0 #070707; 
 
    margin: 0px 0 0 0; 
 
    transition: .25s; 
 
    -webkit-transition: all ease 0.8s; 
 
    -moz-transition: all ease 0.8s; 
 
    transition: all ease 0.8s; 
 
} 
 

 
.menu h5 { 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
.icon1 { 
 
    height: 83px; 
 
    background-image: url(../icons/icon1.png); 
 
    background-position: 47px 0; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 

 
.icon2 { 
 
    height: 83px; 
 
    background-image: url(../icons/icon2.png); 
 
    background-position: 53px 0; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 

 

 
/** Header Menu Close **/

<div class="container header_menu hidden-xs hidden-sm"> 
 
    <div class="col-lg-12"> 
 
    <ul class="menu"> 
 
     <li> 
 
     <a href="/"> 
 
      <h5><span class="icon1"></span></h5>CASINO</a> 
 
     </li> 
 
     <li> 
 
     <a href="/slots"> 
 
      <h5><span class="icon2"></span></h5>SLOTS</a> 
 
     </li> 
 

 
    </ul> 
 

 
    </div> 
 
</div>

.menu li a {