[css-d] Background image position
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... TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
Re: [css-d] Background image position
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; 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... __ 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/
Re: [css-d] Background image position
On Wed, Jun 29, 2011 at 4:31 AM, Tom Livingston tom...@gmail.com wrote: 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... background: url(image.png) no-repeat 50% 0; The above CSS will cause the image to be centered. For the *left edge* to be at the center, you need to double the width of the image by adding a transparent region on the left. For example, if you have an image of width 200px, using an image editor add a 200px transparent region to the left of the image. The new width of the image will be 400px. Now apply the above CSS to align the left edge of the image to the center of the viewport. Regards, Chetan Crasta __ 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/
Re: [css-d] Background image position
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/
