multi-image background

[UFPlanets]

Greet's all.
I've seen a lot of posts looking for information on this, even people testing out CSS3 to get it done, but there must be a more simple way.
So heres the issue.




looking at the above image will give you a vague idea, but here I'll go into more detail.....
Normally the top of the forum is seat by the header, thats just below the top cyan block, and usually thats fine, infact we have that on our current forums, all fine, but the general styles in vbulletin have always been a bit over-limiting. We're trying to create a new style from the ground up, and now I feel my years of working with html, css, and php have just fell out my head....

the code used for the above is:

.lcart1 {
    background-image: url("./images/lcarsnemesis/forumtop.png");
//    background-repeat: repeat-x;
    float: none;
    height: 129px;
    width: 100%;
    margin-bottom: 5px;
    min-height: 2em;
    position: relative;
    right: 460px;
//    padding-left: 200%;
    padding-right: 80.95%;

}

So a div tag calls the css......
The div is first thing in the "header" template file

><div class=lcart1></div>

this was also the second attempt at getting it right, i'll show in another post soon.

Padding honestly doesnt help at all, it will make it fit nicely in 1 resolution, but looking at the image at the top which is 1920 wide, it causes issues for other resolutions.
essentially, we want it to be in the same line as the background, which is:

html {
	background:{vb:stylevar doc_background};
        background-position: center center;

}

the position being the only real change.....

How are we able to get this working properly on any resolution?

Thanks in advance for any assistance you can provide.