Значок меню не отображается

Question

Я создал навигационное меню, и я хочу установить все как процент, так как он должен реагировать. Кажется, что фоновое изображение не показывает значок, возможно, потому что это процент?

Here is the fiddle link

Вот прямой CSS с классом изображения:

.account { 
    background-image: url('https://jsfiddle.net/35xgfb9o/); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

Answer 1

Вы забыли цитату в конце значения URL.

background-image: url('../images/http://www.psdgraphics.com/file/retro-tv-icon.jpg'); 

URL, вероятно, должен быть без ../images

background-image: url('http://www.psdgraphics.com/file/retro-tv-icon.jpg'); 

И последняя одна проблема заключается в том, что .icon имеет нулевую высоту. Фон отображается, но только на этой высоте (= вы ничего не видите). Также добавьте высоту значка.

.icon {height: 20px} 

Answer 2

Вы должны указать height на вашем .Icon элемента.
Вы забыли котировку на .account класса

Как так:

.icon { 
    text-align:center; 
    width:50%; 
    height: 25px; 
} 

Answer 3

рабочий скрипку - https://jsfiddle.net/35xgfb9o/14/

<li class="icon account"> 
    <div ><p>My Account</p></div> 
</li> 

У вас было несколько проблем от неправильного URL, на выходе из цитата в конце url, , чтобы применить ваши классы к пусту div - если div пуст, он не имеет размеров, чтобы назад ground wont show - вы должны добавить свои классы к своим ли элементам или, как указано в ответах выше, добавьте высоту в ваш .icon класс