B. Clay Shannon B. Clay Shannon - 4 years ago 90
CSS Question

Why does my hr (Horizontal Rule) not show the supplied background?

I have this HTML:

<hr />


...and this CSS:

hr {
background: url("http://commons.wikimedia.org/wiki/Mark_Twain#/media/File:Mark_Twain_photo_portrait,_Feb_7,_1871,_cropped_Repair.jpg") no-repeat center center;
}


Yet the hr only displays a normal line, no image. Even when I increase the height of the hr (by adding "height: 200px;" to the CSS), it just shows me an empty rectangle.

What do I have to do to get the image to display?

Answer Source

Two problems

  1. The image you're linking to isn't an image URL. The actual image URL is http://upload.wikimedia.org/wikipedia/commons/e/ee/Mark_Twain_photo_portrait%2C_Feb_7%2C_1871%2C_cropped_Repair.jpg.
  2. Even with the correct URL, hr elements by default have no height. They only have a 1 pixel width border. In order to display the image, you'll need to give your hr element some height.

Example

hr {
  background: url("http://upload.wikimedia.org/wikipedia/commons/e/ee/Mark_Twain_photo_portrait%2C_Feb_7%2C_1871%2C_cropped_Repair.jpg") no-repeat center center;
  height: 100px;
}
<hr />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download