Search code examples
htmlcssmeteormeteor-blazespacebars

Why is my image not displaying in my HR?

I've got this HTML in my Meteor app:

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

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

...and this CSS:

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

The image is in /public/images/dbp.jpg, yet it does not display at all - in fact, the former "plain jane" hr is no longer displaying, either.

What am I missing or doing wrong here?

Solution

  • You need to define height in your hr tag. 

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