Warum Symbol wiederholt?

Question

Ich versuche, Symbol als Element in der Menüleiste zu verwenden, aber wenn Anzeige größer als 1366 x 768 ist, beginnt es zu wiederholen. Hier ist das Bild, wie es aussieht:

Hier ist der HTML & CSS:

.topheader__menu { 
 
    float: right; 
 
    font-size: 5vh; 
 
    font-weight: bold; 
 
    color: rgb(255, 255, 255); 
 
    position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    margin-left: 3vmin; 
 
    margin-right: 3vmin; 
 
    font-family: Arial; 
 
} 
 
.topheader__menu a { 
 
    text-decoration: none; 
 
} 
 
.topheader__menu__item { 
 
    float: left; 
 
    margin-left: 2ch; 
 
    margin-right: 2ch; 
 
} 
 
.nav_1 { 
 
    background: url(../img/nav-menu/home_bl.png); 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
.nav_1:hover { 
 
    background: url(../img/nav-menu/home_wh.png); 
 
}

<div class="topheader__menu"> 
 
    <a class="topheader__menu__item nav_1" href="#">&nbsp</a> 
 
    <a class="topheader__menu__item nav_2" id="current" href="#">About</a> 
 
    <a class="topheader__menu__item nav_3" href="#">Technical</a> 
 
    <a class="topheader__menu__item nav_4" href="#">Products</a> 
 
</div>

Wie soll ich es machen, nicht zu wiederholen, wenn Anzeige größer als 1366x768 ist?

Answer 1

hinzufügen Ersetzen Y Verwendung mit Put unsere CSS Breite dieser Code

.nav_1 { 
    background:url(../img/nav-menu/home_bl.png); 
    display: block; 
    width: 16px; //image width 
    height: 16px; //image height 
    background-repeat: no-repeat; 
} 
.nav_1:hover { 
    background:url(../img/nav-menu/home_wh.png); 
    width: 16px; //image width 
    height: 16px; //image height 
} 

Answer 2

Code unten

.nav_1 { 
background: url(../img/nav-menu/home_bl.png) no-repeat; 
display: block; 
width: 100%;} 

.nav_1:hover { 
background: url(../img/nav-menu/home_wh.png) no-repeat; 
} 

oder

.nav_1 { 
background: url(../img/nav-menu/home_bl.png); 
background-repeat:no-repeat; 
display: block; 
width: 100%;} 

    .nav_1:hover { 
background: url(../img/nav-menu/home_wh.png); 
background-repeat:no-repeat; 
} 

Answer 3

Statt nur backgroundbackground-image und background-repeat:no-repeat zum Schweben Zustand auch wie diese

.nav_1 { 
background-image: url(../img/nav-menu/home_bl.png); 
display: block; 
width: 100%; 
height: 100%; 
background-repeat: no-repeat; 
} 
.nav_1:hover { 
background-image: url(../img/nav-menu/home_wh.png); 
background-repeat: no-repeat; 
}