For the logo, I would simply use this:

Code: Select all

<h1><img src="logo.xxx" alt="Team bullet proof bomb"></h1>

The <h2> should not be interrupted by the | dividers (this is incredibly annoying for screen readers), and it should have the full text. Use this:

Code: Select all

<h2><span>competing</span><span>in</span><span>the</span>
<img src="MongoliaRally.xxx" alt="Mongolia Rally"></h2>

The spans are only necessary because of your line divider effect (the | glyphs). Personally I would dump the dividers, but if you want to keep them, apply them as background images to the spans.

Alternatively, make the entire <h2> into an image, and use the same method as for the <h1>. This would be easier.