<style type="text/css">
.mystyle1 {
background-image: url(bg.gif);
background-repeat: repeat-x;
color: black;
width: 20em;
padding: 1em;
margin: 1em;
border: 3px solid black;
text-align: center;
font-weight: bold;
font-size: x-large }

.mystyle2 {
background-image: url(bg.gif);
background-repeat: repeat-y;
color: black;
width: 6em;
padding: 1em;
margin: 1em;
border: 3px solid black;
text-align: center;
font-weight: bold;
font-size: x-large }

.mystyle3 {
background-image: url(bg.gif);
background-repeat: no-repeat;
color: black;
width: 8em;
padding: 1em;
margin: 1em;
border: 3px solid black;
text-align: center;
font-weight: bold;
font-size: x-large }
</style>
.....
<div class="mystyle1">The background of this text is an image that repeats horizontally</div>
<div class="mystyle2">The background of this text is an image that repeats vertically</div>
<div class="mystyle3">The background of this text is an image that appears only once</div>

....