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

enter image description here

Click for full resolution


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.

  • 1
    Traditionally, you make the body image repeat-y. If the existing image doesn't, then you fix it so it does.
    – Scott
    Sep 12, 2013 at 19:11

2 Answers 2


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. enter image description here

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

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.
enter image description here

Hope you understood, and I helped! :)


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.


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

  • Hi John, Thanks for your solution- I've implemented it and I'm just need to shape a it little more. I am really appreciate your help :) Check the result- webbos.co/vibration
    – Webbos
    Sep 16, 2013 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.