On Jun 29, 2011, at 1:11 AM, Alan Gresley <a...@css-class.com> wrote:
> On 29/06/2011 1:55 PM, John D wrote: >> On 29/06/2011 9:01 AM, Tom Livingston wrote: > >>> List, >>> >>> Is it possible to position a background image on the body of a page so >>> that the LEFT EDGE of the image is always at 50% of the viewport? Ive >>> googled a bit but not sure im using the right search terms... >> >> Of course it is possible. put this code for your background: >> >> background: white url(background_image.gif) repeat-y 50% 0; >> >> In the above code everything is self explanatory except the following: >> >> 50% === background position x; >> 0 === background position y; > > > All that does is positions' the image at the center of the viewport. Tom > wants the _LEFT EDGE_ of the image positioned at 50% of the width of the > viewport. This is possible but you need to also use background-size (or > generated content, see below) which have some unexpected side affects. The > below solutions will work differently but some may or may not be what you are > after. It all depends on what the image is. > > body { > background: url(image.jpg) 100% 0% no-repeat; > background-size: 50% auto; > } > > or > > body { > background: url(image.jpg) 100% 0% repeat-y; > background-size: 50% auto; > } > > or > > body { > background: url(image.jpg) 100% repeat-y; > background-size: 50% auto; > } > > or > > body { > background: url(image.jpg) 100% 0% repeat-y; > background-size: 50% 200px; > } > > > If you are using an image with width and height in absolute values like > pixels and you don't want scaling, then this is another solution. > > html::before { > content: url(image.jpg); > position: absolute; > margin-right: -150px; /* equal width of image */ > left: 50%; > } > body { > position: relative; > z-index: 1; > } > > > Thanks Alan and others who responded. I'll give Alan's suggestions a run-through. ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/