CSS: Background-position + repeat = not working

Question

Anybody encounter this kind of problem with CSS before?

I have a header that's set to 100% width, with an image on the left side (500px wide). I have a background-image which I'd like to fill in for the remaining space horizontally, but not where the image is. Therefore, I set background-position: 500px 0; and presume the background begins at 500px distance from the left side of the browser. But it doesn't. It only works if I set the repeat-property to background-repeat: no-repeat; I just spent 1,5 hours trying to find a solution with no luck, and eventually solved this by adding a margin-left: 500px; to the header and a negative 500px margin-left to the image. Am I missing something here? Why can't I tell my background to start tiling horizontally from x-coordinate 500?

Answer 1

Am I missing something here? Why can't I tell my background to start tiling horizontally from x-coordinate 500?

background-position does not set the origin of the background from which to repeat rightward or downward. It simply shifts the entire background a certain distance along the x and y axes respectively.

When you specify a background to repeat along an axis, it always tiles infinitely in both directions along that axis (i.e. left and right along the horizontal axis, up and down along the vertical axis). You won't be able to change this using CSS's background properties.