Using An Image As A Separator In Html And Css

I'm trying to use png images as separators in a web page but they don't appear. Am I missing something? And if I had to forgo the images how would you do it instead? Many thanks. I

Solution 1:

Just a regular ol <hr> tag will suffice - JSFiddle Demo

HTML

<p>Lorem ipsum dolor sit........rna, quis interdum orci rutrum quis.</p><hr><p>Sed mollis urna me............imperdiet ac augue. </p>

CSS:

hr {
    border:0; 
    height:20px; 
    background:url("http://lorempixel.com/400/200/sports/") 00; 
}

Solution 2:

If the separator is merely a horizontal line, you can use the <hr/> tag in your HTML.

The purpose of the tag is to separate sections, and it should solve your problem aesthetically while providing the correct semantic tag (good for SEO and/or screen readers)

It's always important to remember that Google doesn't know what your image is of, but it knows that <hr/> is there to mark a separation.

Solution 3:

Don't set background for img element... Do it with div:

.Separator
{
   background: url('/ct/images/L/Separator.png');
   width: 70 % ;
}

...

<div class="Separator"></div> 

Solution 4:

Try using

.separator:after {
    content: url(image.jpg);
}