Warum Navbar verdoppelt nach Verwendung von "wiederholen" in CSS?

Question

Ich wollte eine Navbar auf meiner Website erstellen, mit Hintergrund mit der Wiederholung eines orangefarbenen Bildblocks. Hier ist die image. Das Endergebnis zeigt jedoch eine doppelte Navigationsleiste wie gezeigt here. Es bleibt verdoppelt, auch nachdem das Attribut "repeat" in css geändert wurde. Wie mache ich es nur 1 Schicht anstatt verdoppelt zu werden?

Hier ist meine CSS-Code:

#cssmenu{ 
     border-style: initial; 
    border-color: initial; 
    border-width: 0px; 
    margin: 0px; 
    padding:0px; 
     border-image-source:initial; 
     border-image-slice:initial; 
     border-image-width:initial; 
     border-image-outset:initial; 
     border-image-repeat:initial; 

     list-style-type:none; 
     list-style-position:initial; 
     list-style-image: initial; 


     line-height:1; 
     display:block; 
     position:relative; 
     box-sizing: border-box; 


     background-image: url('../../SiteAssets/o.png'); 
     background-repeat:repeat; 
     background-repeat-x:repeat; 
     background-repeat-y:repeat; 
     z-index:2; 


    } 

    #cssmenu:after{ 

    content:"."; 
    z-index:2; 
    display:block; 
    clear:both; 
    visibility:hidden; 
    line-height:0; 
    height:0; 

} 

und mein HTML-Code:

<div id="cssmenu" style="left:0px; top:0px" > 
     <ul> 
      <li> 
       <!--main--> 
      <ul><!--dropdownlist--></ul> 
      </li> 
      <li> 
       <!--main--> 
      <ul><!--dropdownlist--></ul> 
      </li> 
      <li> 
       <!--main--> 
      <ul><!--dropdownlist--></ul> 
      </li> 
      <li> 
       <!--main--> 
      <ul><!--dropdownlist--></ul> 
      </li> 
      <li> 
       <!--main--> 
      <ul><!--dropdownlist--></ul> 
      </li> 

     </ul> 

     </div> 

Answer 1

Dies ist das richtige Verhalten. Sie wiederholen das Hintergrundbild auf der y-Achse, und wegen der Steigung, die Sie dort haben, sehen Sie es zweimal. Das Bild ist zu klein für die Höhe der Navigationsleiste. Setzen Sie also entweder oder BETTER: verwenden Sie Hintergrund-Farbverlauf.

Answer 2

sagen Sie den Code Hintergrund-Bild wiederholt wird, so wird Bild als verdoppelt navbar zeigt. Fügen Sie diesen Code in css background-size hinzu: 100% 100%; in #cssmenu