javascript STYLE backgroundPosition

backgroundPosition

NN 6 IE 4 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%

Previous: javascript STYLE backgroundPositionX, backgroundPositionY

Next: javascript STYLE backgroundImage

Permanent URL: http://javascript.gakaa.com/style-backgroundposition.aspx
Updated: Aug 08, 2009

Nick

#1

2009-08-07

[Quote]

Didn't crossed your mind that someone *might* need to put there a pair of variables when using javascript???
How the $%#@ he can do this then in the worst-ever language called "javascript"???
Guest #554

#2

2009-12-22

[Quote]

[Nick: Didn't crossed your mind that someone *might* need to put there a pair of variables when ...]
Igor

#3

2010-02-12

[Quote]

document.getElementById("div3").style.backgroundPosition = x + 'px ' + y + 'px';

Not that difficult, huh? ;)
D4rk

#4

2010-08-18

[Quote]

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

#5

2010-10-29

[Quote]

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.

Nick

Guest #554

Igor

D4rk

Joequincy

1810,Nickname,Homepage or email,Comments here,Add comment