nvoptima nvoptima - 3 months ago 12
CSS Question

Using Picture as split line between upper and lower wesite content

I am trying to use a coloured picture like a split horizontal line between upper paragraph content and lower paragraph content in my webpage. But the problem is that although I have set picture as background for .hr class in CSS code, a grey line still appears above the picture-split-line. How can I remove the line above the picture?

Html I am using is below:

<p>
upper content upper content upper content upper content upper content upper content
</p>

<div class="hr">
<hr />
</div>

<p>
lower content lower content lower content lower content lower content lower content</p>


Here is my css:

div.hr {
background: #fff url(image.png) repeat scroll center;
height: 10px
}


I have tried altering
div.hr
properties to overlap the line but nothing works. Please help.

Answer

The line is actually the <hr> (horizontal rule). You have to add css code to prevent diplaying the <hr>. Adding following to your CSS will solve the problem:

div.hr hr {
display: none
}
Comments