I've seen many web pages where this is done. I do believe the commonly accepted approach is to configure your banner such that the width is far wider than you ever expect the user to have. For example, perhaps determine the largest resolution that is likely to be in use, then add a few pixels to the width to be sure. That way the full banner displays and if the browser is narrower, there are parts that simply aren't shown.
Helpful and Handy Links
If I understand correctly, the banner has three parts:
1. A repeating background.
2. An image that is on the left side
3. An image that is on the right side
You can cut up the image. Have the background repeat on the entire page and position the other images relative to the browser width so they reposition when the browser is scaled.
Example with a background and an image:
background: url(images/title.png) repeat-x left bottom;
background: transparent url(images/melodies.png) no-repeat right top;
The HTML is:
<div class="header"><div id="melodies"></div></div>