<div>
got it:<br />
<br />
h2 {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 110%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image:url(/imag<wbr />es/bluBar.<wbr />gif);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*background: #C6D5FD url(/images/corner.gif) no-repeat top right;*/<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:1px solid #0099FF;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:2px 0px 2px 5px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:0;<br />
}<br />
h2 div {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:url(/images/cor<wbr />ner.gif) no-repeat top right;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:-2px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-top:3px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<br />
then for the H2 I do this<br />
&lt;h2&gt;&lt;div&gt;Header Text&lt;/div&gt;&lt;/h2&gt;
</div>


got it:

h2 {
      font-size: 110%;
      background-image:url(/images/bluBar.gif);
      /*background: #C6D5FD url(/images/corner.gif) no-repeat top right;*/
      border-bottom:1px solid #0099FF;
      padding:2px 0px 2px 5px;
      margin:0;
}
h2 div {
      background:url(/images/corner.gif) no-repeat top right;
      position:relative;
      top:-2px;
      padding-top:3px;
      }

then for the H2 I do this
<h2><div>Header Text</div></h2>

<div>
<div class="content wysiwyg-content">
I have a situation, in which I am using H2 for headers of a page.<br />
<br />
this works:<br />
h2 {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 110%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image:url(/imag<wbr />es/bluBar.<wbr />gif);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*background:url(/images/c<wbr />orner.gif)<wbr /> no-repeat top right;*/<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:1px solid #0099FF;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:2px 0px 2px 5px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:0;<br />
}<br />
<br />
however, you can see the commented area is another image that makes it look like there is an angled corner. &nbsp;However, I am obliviosly going about this the wrong way, because an element cannot have 2 background images.<br />
<br />
How can I work around this? &nbsp; I have tried making a div with the corner bg image, and tried wrapping the H2 in it, no dice.......
</div>
</div>


I have a situation, in which I am using H2 for headers of a page.

this works:
h2 {
	font-size: 110%;
	background-image:url(/images/bluBar.gif);
	/*background:url(/images/corner.gif) no-repeat top right;*/
	border-bottom:1px solid #0099FF;
	padding:2px 0px 2px 5px;
	margin:0;
}

however, you can see the commented area is another image that makes it look like there is an angled corner.  However, I am obliviosly going about this the wrong way, because an element cannot have 2 background images.

How can I work around this?   I have tried making a div with the corner bg image, and tried wrapping the H2 in it, no dice.......

Background Image for H2

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.