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/

Reply via email to