Categories: STYLE

javascript STYLE backgroundPosition

@Aug. 8, 2009, 9:01 a.m.

backgroundPosition

Firefox/Netscape/NN 6 IE 4 Chrome/Safari/DOM 2

Read/Write

Indicates the top and left location of a background image relative to the element's content region (plus padding). Positions may be specified as length values (with numbers and units or percentages) or according to a combination of constants top, right, bottom, left, and center. The property has no effect on a background images set to repeat along both axes. Some value types don't work (or work correctly) in IE 4. Available as a property of the IE style and runtimeStyle objects only.

Example

document.getElementById("div3").style.backgroundPosition = "20% 50%";

Value

A string containing one value (to be applied to both horizontal and vertical axes) or a space-delimited pair of values. Values may be explicit length values (with units, as in 30px 5px), percentages (e.g., 50% 50%) or position constants that have explicit meanings for their combinations.

Percentage values are interpolated logically. For example, a value of 0% means that the image abuts the left or top edge of the element block; a value of 50% centers the image vertically or horizontally; a value of 100% places the image flush right or bottom..

Constant value pair	Percentage equivalents	Constant value pair	Percentage equivalents
top left	0% 0%	center center	50% 50%
left top	0% 0%	right	100% 50%
top	50% 0%	right center	100% 50%
top center	50% 0%	center right	100% 50%
center top	50% 0%	bottom left	0% 100%
right top	100% 0%	left bottom	0% 100%
top right	100% 0%	bottom	50% 100%
left	0% 50%	bottom center	50% 100%
left center	0% 50%	center bottom	50% 100%
center left	0% 50%	bottom right	100% 100%
center	50% 50%	right bottom	100% 100%

Default

0% 0%

javascript STYLE backgroundImage

Permanent URL: http://javascript.gakaa.com/style-backgroundposition.aspx

I noticed that it's hard to find your website in google, i found it on 26th spot, you should get some quality backlinks to rank it in google and increase traffic. I had the same problem with my blog, your should search in google for - insane google ranking boost - it helped me a lot

MircooF - 2013-12-13

Javascript is ridiculously powerful, and with the right tools (Firebug, mostly) it's a cinch to debug. Spend some more time looking at different debugging methods.

Joequincy - 2010-10-29

We must admit that Nick is right in claim that javascript is worst-ever in debugging and stuff.

D4rk - 2010-08-18

Add comment (6)