On Jun 29, 2011, at 1:11 AM, Alan Gresley <[email protected]> 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 [[email protected]]
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/
