CODEWITHSUNDEEP
htmlcss
user3398870
user3398870

Reputation: 19

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 have the following HTML:

<tr>
   <td align="center">
      <img class="Separator" align="center" style="width:70%" />    
   </td>
</tr>

and the following CSS:

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

Upvotes: 0

Views: 8554

Answers (4)

Nick R
Nick R

Reputation: 7784

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/") 0 0; 
}

Upvotes: 4

Dan Green-Leipciger
Dan Green-Leipciger

Reputation: 3922

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.

Upvotes: 2

Pavel Štěrba
Pavel Štěrba

Reputation: 2912

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>

Upvotes: 1

Andrei Terecoasa
Andrei Terecoasa

Reputation: 572

Try using 

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

Upvotes: 0

Related Questions