: Implement non-symmetrical background image to a site 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

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.

10.02% popularity Vote Up Vote Down

: How to re-create this iOS7 blur effect Tried a lot but I just can't quite get it, how do I achieve a translucent tab bar like this:

@Hamaas979

Posted in: #Blur #Effects

2 Comments

: How to put a dotted line stroke on a vector shape using Photoshop I've created a simple vector pennant type banner using Photoshop. I'd like to put a stroke on the banner with dashed lines

@Hamaas979

Posted in: #AdobePhotoshop #Stroke #Vector

1 Comments

: Adding noise to a path in Inkscape Is it possible to add some (controllable amount of) noise to a path with Inkscape? When creating a fictional map, I would like to add rivers with the bezier

@Hamaas979

Posted in: #Inkscape #Path

1 Comments

: How to create a frame to-fit different images my request is nothing very advanced (the way I think it should be done at least). I blog for a business, and part of "keeping the style throughout"

@Hamaas979

Posted in: #AdobePhotoshop #TemplateDesign

1 Comments

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

@Mendez620

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

10% popularity Vote Up Vote Down

@Hamaas979

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.

10% popularity Vote Up Vote Down

Feed

: Implement non-symmetrical background image to a site 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

More posts by @Hamaas979

: How to re-create this iOS7 blur effect Tried a lot but I just can't quite get it, how do I achieve a translucent tab bar like this:

: How to put a dotted line stroke on a vector shape using Photoshop I've created a simple vector pennant type banner using Photoshop. I'd like to put a stroke on the banner with dashed lines

: Adding noise to a path in Inkscape Is it possible to add some (controllable amount of) noise to a path with Inkscape? When creating a fictional map, I would like to add rivers with the bezier

: How to create a frame to-fit different images my request is nothing very advanced (the way I think it should be done at least). I blog for a business, and part of "keeping the style throughout"

Login to post a comment!

2 Comments

Back to top | Use Dark Theme