How to make an expandable background?

Question

css

There is such a layout: The main block fits into 1024. At high resolutions, the background becomes visible in its entirety. How to make something like this? The problem is that the form is transparent, otherwise I would have made the central block separately and the background in the center of the body separately (the background in this case will walk by a pixel). Basically, it should look like this: jsfiddle.net/37QvE/1/ With controls active only.

Answer 1

As an option, this: For example, the right side contains the entire background plus the right corner. And the left one is only the left corner with a large supply of black overlap (in principle, you can also get rid of it, but the essence is that it exists). As a result, we will position the right side as needed, aligned to the right side, and the left side will cover the unnecessary part of the background.

Answer 2

Well, it’s not entirely clear what the difficulty is, put the main image as a background to the body, and translucent png can be applied to the background of the elements, they are normally displayed in all modern browsers.

Answer 3

Maybe background-size will help you ?
Well, immediately a small crutch for a donkey 8

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.gif',
sizingMethod='scale')";