Making the horizontal rule a picture

andypandyrox456 · April 7th, 2010, 09:34 AM

Hello everyone!
Is it possible to make a horizontal rule into a picture that stretches across the page horizontally and acts as a divider?
Or should I just take the picture and make the width 100%?

PeterPeiGuo · April 7th, 2010, 09:51 AM

Code:

<html>
<head>
<style>
hr {
  	height: 15px;
  	background: #fff url(1.jpeg);
}</style>
</head>
<body>
	foo
	<hr />
	bar
</body>
</html>

andypandyrox456 · April 7th, 2010, 10:37 AM

Quote:

Originally Posted by PeterPeiGuo

Code:

<html>
<head>
<style>
hr {
  	height: 15px;
  	background: #fff url(1.jpeg);
}</style>
</head>
<body>
	foo
	<hr />
	bar
</body>
</html>

Ok thanks!
Just one question - what is the purpose of also including a color (#fff)?

PeterPeiGuo · April 7th, 2010, 12:21 PM

The color is not too useful in my previous example, but you can see its use here:

Code:

<html>
<head>
<style>
hr {
  	height: 15px;
  	background: red url(winter.jpg) no-repeat center;
}</style>
</head>
<body>
	foo
	<hr />
	bar
</body>
</html>

andypandyrox456 · April 7th, 2010, 12:26 PM

Quote:

Originally Posted by PeterPeiGuo

The color is not too useful in my previous example, but you can see its use here:

Code:

<html>
<head>
<style>
hr {
  	height: 15px;
  	background: red url(winter.jpg) no-repeat center;
}</style>
</head>
<body>
	foo
	<hr />
	bar
</body>
</html>

aha that makes more sense since you centered it. Thanks!
I just implemented it onto my website. The horizontal rule now looks like an asteroid. Click here to visit the website