Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hr with an image through css

Tags:

html

css

I find this a pain. I am trying to get CSS to use an image when the < hr /> tag is used. I am currently using:

hr
{
  display:block;
  border:none;
  height:10px;
  background-image:url('img/ruler.gif');
} 

However, I always get a border around the image. As you can see, the border:none does nothing.

I know there are alternative ways such as using div. But is it possible through using the hr tag only?

The main users will be using IE6, so need a IE6 compatable solution please. Thanks

like image 661
waqasahmed Avatar asked Jul 08 '09 09:07

waqasahmed


People also ask

Can you style an hr in CSS?

You can simply use the CSS background-color property in combination with the height and border to the change the default color an <hr> element. In the following example we've changed the color of hr tag to light grey. You can also increase the thickness of the line by simply increasing the value of the height property.

How do I reference an image using CSS?

Usage is simple — you insert the path to the image you want to include in your page inside the brackets of url() , for example: background-image: url('images/my-image. png'); Note about formatting: The quotes around the URL can be either single or double quotes, and they are optional.

What is HR styling in CSS?

Updated on July 1, 2020. The HTML <hr> element represents a Horizontal-rule and it is used for page break via line. It creates horizontal line, which makes someone to understand that there is an end of the page or a sentence break.

How do I make HR horizontal in CSS?

Its simple to add a horizontal line in your markup, just add: <hr>. Browsers draw a line across the entire width of the container, which can be the entire body or a child element. Originally the HR element was styled using attributes.


1 Answers

hr {
    display:block;
    border:0px;
    height:10px;
    background-image:url('img.gif');
}
like image 85
BLURSH Avatar answered Oct 17 '22 20:10

BLURSH