Фоновое изображение для элемента меню

Question

Я работаю на этом сайте edsys.in. Последний якорь элемента меню (образовательный контент) имеет фон gif с текстом тренд новый. Изображение исчезает, когда я применяю следующий CSS:

background-position-y: 20px; 

Установка высоты на якоре не работает.

Это мой текущий CSS:

.trending a { 
    background: url('http://www.edsys.in/wp-content/uploads/trending.gif') no-repeat bottom; 
    background-position-x: 5px; 
} 

Answer 1

Ваш фон отрезаны, потому что переливается элемент привязки. Простое регулирование высоты не будет работать, так как якорь является встроенным элементом. Попробуйте установить свой якорь display: block; первым, например:

.trending a { 
    background: url('http://www.edsys.in/wp-content/uploads/trending.gif') no-repeat bottom; 
    background-position-x: 5px; 
    background-position-y: 20px; 
    display: block; 
    height: 100%; 
} 

Answer 2

.trending a { 
background: url('http://www.edsys.in/wp-content/uploads/trending.gif')no-repeat 5px bottom; 
height:''; 
width:''; 
}