How to position the split line caused by background repeat.

Question

I would like to have a repeat-x on my body background for a web site, but the background is 1024 wide, so on wider displays, the line where the image begins again will be positioned to the right of the body, and possibly visible. My content is in a div 800 wide centred on the body. I would like the 'split' like from the repeating background to occur in the centre of the body, where it is hidden by the content.

I'm sure this is possible, with some trickery, the details of which are beyond my novice design and layout skills.

WORKAROUND: I used the Liquid Rescale GIMP plugin, which uses seam carving, to stretch the images to twice their original size. It works great, and I'm happy for now, but it's not an answer to this question.

Answer 1

just put in the style:

background-position: 400px 0px;

this will start the repeating 400px from the left side (thus moving the split under the content)

Answer 2

I think it is not possible to do this dynamically (without taking the screen size into account) without using CSS expressions. I don't know the details about browser support though. A quick google search turned up this page as an example of how to do this.

http://valums.com/vertical/

Answer 3

A straightforward way to do this without any CSS trickery or extra markup is to modify the image. Center the background image with:

background-position: top center;

...and then offset the actual image file in an editor. In Photoshop use Filter >> Other >> Offset and use a horizontal value that is half of the image's width. Likewise, in the Gimp use Layer >> Transform >> Offset.

That's not the clean CSS solution you were looking for, but it's a nice pragmatic fix.

Answer 4

Adding to what David said, creating a seamless, tiling background image isn't that tough:

Seamless background with Photoshop

It takes a bit of time, but it will look good at all screen resolutions once you're done.