CSS: Background Position + Repeat = Doesn't Work
Has anyone faced such a problem with CSS before?
I have a header that is set to 100% width, with an image on the left side (500px wide). I have a background image that I would like to fill for the remaining horizontal space, but not where that image is. So I set background-position: 500px 0;
and assume that the background starts at 500px from the left side of the browser. But this is not the case. It only works if I set the repeat-t property background-repeat: no-repeat;
, I just spent 1.5 hours trying to find a solution with no luck and ended up solving it by adding a margin-left: 500px;
500px negative margin-left to the image in the title and a negative 500px margin-left. Am I missing something? Why can't I tell my background started splitting horizontally from x-coordinate 500?
source to share
Am I missing something? Why can't I tell my background started splitting horizontally from x-coordinate 500?
background-position
does not set the background source from which to repeat right or down. 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 breaks infinitely in both directions along that axis (that is, to the left and right along the horizontal axis, up and down along the vertical axis). You won't be able to change this using CSS background properties.
source to share
In response 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/
source to share
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 margin-left: 500px; Set a repeating background on this second div and make sure the height and width are 100%. You can also set an overflow: hidden in the header to avoid scrollbars appearing.
source to share