Фоновая позиция Nivo игнорируется

Question

Хотелось бы, чтобы кто-то помог мне устранить проблему с моим css для позиционирования фона на слайдере nivo, который я реализую на новом дизайне.

Фоновая позиция игнорируется для .nivo-nextNav, и я не могу понять, почему.

Вот мой CSS:

/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a { 
display:block; 
width:43px; 
height:45px; 
background:url(../images/arrows.png) no-repeat; 
text-indent:-9999px; 
border:0; 
} 
.nivo-prevNav { 
left:0px; 
} 
.nivo-nextNav { 
background-position: -43px 0; 
right: 22px; 
} 

Ссылка на страницу: http://www.plumeriawebdesign.com/Headstand%20Software/

он у меня работает. Я изменил CSS для .nivo-directionNav a к следующему:

.nivo-directionNav a { 
position:absolute; 
top:40%; 
z-index:9; 
cursor:pointer; 
width: 43px; 
height: 45px; 
text-indent:-9999px; 
background-image:url(../images/arrows.png); 
background-repeat: no-repeat; 
} 

Теперь фон установлен правильно. Любопытно, почему он работает на своем слайдере по умолчанию на своем сайте, а не на моем. Странно для меня.

Answer 1

Ваше фоновое положение установлено на .nivo-nextNav, но .nivo-nextNav не имеет фона, ссылка делает; «a» in. nivo-nextNav a < -

самое простое решение: поместите положение в фоновом режиме;

.nivo-directionNav a { 
....... 
background:url(../images/arrows.png) -43px 0 no-repeat; 

Answer 2

background-position только позиционирует фоновое изображение. Но в вашем элементе .nivo-nextNav фоновое изображение отсутствует.

Из того, что я вижу NivoSlider использует стрелки, как это:

.nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(arrow.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
} 

Попробуйте использовать якорный тег в самого начало ваших элементов.