Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
Traditionally, you make the body image repeat-y. If the existing image doesn't, then you fix it so it does. – Scott Sep 12 '13 at 19:11

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.

share|improve this answer
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 Sep 16 '13 at 15:38

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! :)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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