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?

If an answer was useful to you, you should mark it as accepted. Help the SO community. — Cthulhu, Oct 01 '13 at 11:04

score 6 · Accepted Answer · answered Mar 11 '12 at 18:10

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.

It's my pleasure. You can mark an answer accepted by clicking the checkmark on the left. Welcome to SO! — BoltClock, Mar 11 '12 at 18:22

score 1 · Answer 2 · answered Mar 11 '12 at 18:22

In adition to BoltClock's answer, you can simulate this by placing a div inside, to be the background

html:

<div id="repeater">
    <div id="repeater-offset"></div> 
</div>

css:

#repeater {
    background-image:url('http://lorempixel.com/400/200');
    background-position: 100px 0;
    height: 300px;
    width: 300px;
    border: 1px solid #000;
}

#repeater-offset {
    background-color:#fff;
    position:relative;
    width:100px;
    height:100%;
}

See fiddle: http://jsfiddle.net/NmxrK/1/

score 0 · Answer 3 · answered Mar 11 '12 at 18:17

Create a second div inside the header next to the image on the left. You can achieve this in many ways, such as float: right or with absolute positioning and a margin-left: 500px; Set your repeating background in this second div and ensure than the height and width are 100%. You can also set overflow:hidden in your header to avoid scrollbars appearing.

CSS: Background-position + repeat = not working

3 Answers3