inserting an image using css

[Vespasian]

I have a small image of a ball which I insert numerous times on each of the pages of a web site. It might appear as many as 20 times on a page.

Using Dreamweaver, I've been using the insert command to do this. The code inserted is:

<span class="clear"><img src="../graphics/bullets/ball.gif" alt="tan ball graphic" width="15" height="15" /></span>

I'm completely new to css, but I'm thinking there must be a cleaner way to do this. Can someone please point me in the right direction? And bear in mind I am only just learning css, so it will have to be very basic.

[swa66]

Can you elaborate a bit more on the context what you use the ball for ?
What's the "semantic" role of the ball ? Is it a bullet in a list , a clickable area to select something, a break between paragraphs, ...

A tiny bit more html to go along with that context would help us too in all likelihood.

Most likely css can add background-images on just about any element you might have, but knowing a bit more about th structure and goal of it is needed to show you the best way.

Still to get you going:
suppose you want to add the ball as a divider between paragraphs:

p { 
  padding:0;
  margin:0;
  background-color: white;
}
p+p {
  background: white url(ball.gif) no-repeat top center;
  padding-top: 20px;
}

(it's not going to work in IE6 as-is)

The first statement removes padding and margins from paragraphs (they by default have some (browser dependent just what)
And gives them a white background.

The second one adds an image to the background of paragraphs that are preceded by other paragraphs, and fives them enough padding to have the background stick out over the text.

Padding etc might need to be adapted to the actual image etc.

IE6 doesn't support the sibling selector p+p, so it'll degrade there not to show it at all (there are fixes for that).

[alt131]

Hi Vespasian,
Like swa66 I wonder about the context of the image in terms of whether it should be in the html, or in the css, whether it is necessary to insert it so many times, and if so whether the images be combined, for example, to reduce server hits, etc.

Some alternative ways to insert images if they are presentational only (so don't have to be in the html) are:

In your css
b {
background: blue url('../graphics/bullets/ball.gif') no-repeat;
line-height:15px;
width:15px;
display:inline-block;
}

i {
color:red;
font-weight:bold;
font-style:normal;
font-size:2em;
vertical-align:middle;
}

ul {
list-style-type:none;
}

li {
padding-left:15px;
background: transparent url('xhtml10_copy1.gif') no-repeat;
}

In your html:
<p>This is an example using a background image on a bold element because bold is not used so often, <b>&nbsp;</b> and this is an example using a "bullet" inside styled italics <i>&#8226;</i> for the same reason. Neither are very nice from an accessibility perspective, so it would be better to use them in conjunction with an element that already exists in the code.</p>
<ul>
<li>Increase the padding</li>
<li>to create some</li>
<li>space between the</li>
<li>image and list item</li>
</ul>

[Vespasian]

Thanks much. I use the ball mainly to break up type and headlines. the page is mostly type and links, with very few graphics. So, I use the quarter-inch size balls to break up the copy. Normally I'll insert one right at the beginning of a headline in order to get away from the look of solid text on the page.