header background with two aligned images

Hey,

I’d like to divide the background image for the header in two images and align them back-to-back of each other, the page width would be the “meeting point”. Here’s a mockup: http://i.imgur.com/dOzhFEG.png

Background image inside the full header (including the info bar atop).
Image01 aligned right, sitting inside the pagewidth and extending to the left side of the browser window.
Image02 left aligned, outside pagewidth and extending to the right side of the brwoser window.
Background color should be transparent. When scrolling down only logo and main menu stay at top and default background color should fade in (default behaviour).

Logo doesn’t need to be scaled, it just moves from one position to the other when scrolling down. Starting position should probably be set with absolut pixels.

How would I go about this without breaking future updates? I currently use the child theme.

Thanks in advance!