I'm currently redesigning my website and I came across the problem of creating a seamless background in the header. I solved it eventually. Just wanted to let you guys know the answer in case anybody else has this problem.

I have a header that has a repeating pattern as background. The header also contains an image that sits centrally aligned on the page. Sounds easy, so I just did the following

The CSS looks like this


The header image continues the background pattern. The transition between the two should be seamless. But as you can see here it doesn't really work. When you change the width of the browser window the header image slides across the background.

After a bit of searching on the web I finally found this very simple solution. By simply setting the horizontal background position to center, one can align the background with the centralised header image.




The working example can be seen here.

Very nice post holger! Thank you..

Nice post mate

Could this be made into a tip and trick or a sticky, just so it doesn't get lost in the forums

Note that this is a special case of a more general method.

background-position: center 0; is the same as background-position: 50% 0;

So if you ever want a "proportionately off-centre" background, you can use something like background-position: 35% 0;

**EDIT**

Actually, it's just occurred to me that "50%" may not be quite the same as "center", because 50% should position the top-left corner of the image in the centre, which is not quite the same as centring the image.

This post has been edited by MikeHopley: May 28 2008, 05:25 AM

No.
Your first statement was correct. Interestingly percentages in the background position do not refer to the top left corner of the background image. For example background-position: 25% 0; will not only place the image 25% from the left of the surrounding div but also use the point 25% from the left border of the image itself as reference point. I think the reason for this behavior is exactly so that you can write

background-position: 0% 0%; to place the top-left of the image in the top-left corner
background-position: 50% 50%; to place the center of the image in the center
background-position: 100% 100%; to place the bottom-right of the image in the bottom-right corner

Ah, how delightful.

It just shows how much thought goes into the specifications. That's actually what I've come to expect from experience, but I suddenly realised a potential flaw in the idea of "50% = center, while 0% = left". Unsurprisingly, the smart W3C people had already thought of that.

This post has been edited by MikeHopley: May 28 2008, 10:40 AM