Implement non-symmetrical background image to a site

Question

I am trying to add the following 3D image as background to the content of a wordpress website:

_{Click for full resolution}

Website

I would like the header part to stay the same size on all pages, the same goes for the footer. But as the body changes from page to page, i would like it to change accordingly but still fit properly to the header and footer part of the whole image.

The problem with this background is the fact that it not symmetrical so the top & the bottom of the body image suppose to include the top & the bottom of the canvas (the middle part of the image)

I tried different techniques to implement this solution, but couldn't figure it out. The issue is that the body part of the image doesn't repeat-y so well, as it changes throughout the height of the image,

I would appreciate a solution, and it doesn't matter for me if i have to cut the images to a several parts.

Answer 1

This solution needs little retouching on the image and works for fixed width website.

First [Ref Image 1]
Make the footer background [bg] smaller width, that of the "body bg". So that, the footer bg won't conflict with "bricks" bg. It needs some retouch.

Second [Ref Image 2]
Make the Image 2 as fixed bg to html or body . So that, only "white-wall bg" will repeat/scroll.

Third [Ref Image 3]
Cut the "white-wall-bg" exactly where it is marked, and use "brush/eraser" to retouch around the edges. Put this for the "container" which has body content. So that, if content increases also, bg will repeat.

Hope you understood, and I helped! :)

Answer 2

2 suggestions:

Split the image in the center where the perspective is perfectly horizontal. You could then repeat a tiled background there in between your top and bottom image halves. Not perfect perspective, but at least you'll have no seams.

or:

Use CSS3 3D transforms and let the browser do the perspective part for you. You could then simply tile your wall image.