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;
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
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/
