Clever Geek Handbook

How to position the separator line caused by repeating background

I would like to have repeat-x on my body background for a website, but the background is 1024 wide, so on wider displays, the line where the image starts over will be to the right of the body, and possibly visible. My content is in div 800 centered on the body. I would like the "split", as from a repeating background, to occur in the center of the body, where it is hidden by the content.

I'm pretty sure this is possible, with some trickery, the details of which don't match my newbies and layouts.

WORKAROUND: I used the Liquid Rescale plugin , which uses seam cutting to stretch the images in half to their original size. It works great and I'm happy with it, but that's not the answer to this question.

+2


source to share


4 answers


just put style:

background-position: 400px 0px;


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

+2


source


An easy way to do this without any CSS tricks or additional markup is to change the image. Center the background image with:

background-position: top center;


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

This isn't the clean CSS solution you were looking for, but it's a good pragmatic fix.

+3


source


I think it is not possible to do this dynamically (disregarding screen size) without using CSS expressions. However, I don't know the details of browser support. A quick google search showed this page as an example of how to do this.

http://valums.com/vertical/

+2


source


Adding on to what David said, creating a seamless tiled background image isn't all that hard:

Seamless Photoshop background

It will take a little time, but after you are done it will look good on all screen resolutions.

+1


source






More articles:


All Articles