Почему мое изображение не отображается в моем HR?

Question

Я получил этот HTML в моем Метеор приложение:

<template name='layout'> 
    {{> banner}} 
    {{> yield}} 
</template> 

<template name="banner"> 
    <h1 class="monospaceboldsmallcap chocolatefont">Platypi of the World Unite! (Duckbilled, that is)</h1> 
    <hr/> 
</template> 

... и это CSS:

hr { 
    background:url('/images/dbp.jpg') repeat-x top left; 
    border: 0; 
} 

Изображение в /public/images/dbp.jpg, но это делает не отображается вообще - на самом деле, прежний «простой jane» hr больше не отображается.

Что мне не хватает или что-то не так?

Answer 1

Вам необходимо определить высоту в теге hr.

hr{border:1px solid red;height:30px;background:url(https://i.stack.imgur.com/VJ2Se.png?s=32&g=1)}

<hr>