Background image padding?

How can it be done

[vwds]

I am working on a site that I want to put a bacground image on one of the divs. The div currently employs a technics I got of the web to give it rounded images. the code makes it so that you place the left corner images in the HTML and the right corner images are background images in the CSS. I also want to place an additional background image by giving the div another class HTML and CSS below. I hope I have been clear enough, comments and questions welcome.

Thanks VWDS

HTML:  
<div class="pgraph centered savead"> 
 <!-- roundtop begin --> 
 <div class="roundtop"> 
 <img src="TL.png" alt="" width="30" height="30" class="corner" style="display: none" /> 
 </div> 
 <!-- roundtop end --> 
 <h2>We Can save you time and money!</h2> 
 <!-- roundbottom begin --> 
 <div class="roundbottom"> 
 <img src="BL.png" alt="" width="30" weight="30" class="corner" style="display: none" /> 
 </div> 
 <!-- roundbottom end --> 
</div> 
CSS: 
.centered 
 { 
 text-align: center!important; 
 } 
/* Round Corner Styles Begin */ 
.roundtop  
{  
background: url(TR.png) no-repeat top right;  
border: 0px; 
height: 30px; 
} 
.roundbottom  
{ 
background: url(BR.png) no-repeat bottom right;  
height: 30px; 
padding: 0px; 
} 
.banner .roundbottom 
{ 
margin-bottom: 0px!important; 
} 
img.corner  
{ 
 width: 30px; 
 height: 30px; 
 text-align: left; 
 border: none; 
 margin: 0px; 
 display: block!important; 
 padding: 0px; 
} 
/* Round Corner Styles End */ 
/* Show only to IE PC */ * html .pgraph {background-color: #B9B9FF;} /* For IE 5 PC */ 
.pgraph h2 
{ 
color: #000000; 
text-align: center; 
} 
.pgraph 
{ 
margin-right: .5em; 
margin-top: .5em; 
/*display: inline;*/ 
width: 100%;  
padding: 0px; 
background-color: #c0c0ff; 
color: #000000; 
text-align: left; 
} 
/* Paragraph Styles End */ 
/* Specific Styles Begin */ 
.savead 
{ 
background: url(saveadbg.png) repeat top left; 
background-color: #c0c0ff; 
} 
/* Specifc Styles End*/ 

[createErrorMsg]

to place an additional background image by giving the div another class

If your question is, Can I put another background image in this <div>, the answer is no. Any element can contain only one BG image. If you were to add a second class with a different background to the same element, it would write whichever one came last over top of the one that came first.

If you want to 'layer' background images, you have to place those images in different elements, stack the elements, and make sure the background color for higher elements (closer to the user) is set to 'transparent', although even this won't work if the images themselves haveno transparency (or don't fill the whole container) and in IE browsers, even images with transparency aren't transparent without JS help.

[vwds]

The current code creates this:

______________________##
______________________##
________________________
________________________
________________________
______________________##
______________________##

the lines are the main BG while the #s are the secondary

I want the lines to have a padding where this occurs

++____________________++
++____________________++
++____________________++
++____________________++
++____________________++
++____________________++
++____________________++

where the +s is a 30 pixel padding to the edge of the div. The div can vary in size depending on the size of end I want it to look like this:

++____________________##
++____________________##
++____________________++
++____________________++
++____________________++
++____________________##
++____________________##

I think that this would be easy if I can achieve the second diagram.

I hope this clears it up some. Thanks

VWDS