Background position with javascript

backgroundPositionX style property

Specifies or returns the horizontal coordinate of the backgroundImage relative to the upper-left corner of the container object.

This property is not supported by all browsers, so use backgroundPosition property instead wherever you can.

Syntax:

Possible values:

Background is horizontally centered.

Background is aligned to the left.

The horizontal position of the background in length units. For the supported length units, see the length page.

The horizontal position is the specified percentage of the width of the object.

Background is aligned to the right.

Example HTML code 1:

head> style> .example  background-image: url("bg.jpg"); background-repeat: no-repeat; width: 200px; height: 200px; border:1px solid #CCCCCC; background-position-y: center; > .left  background-position-x: left; > .right  background-position-x: right; > style> head> body> div class="example left" style=" float:right;"> The image is at the left of this division. div> div class="example right"> The image is at the right of this division. div> body>

Example HTML code 2:

head> style> .example  background-image: url("bg.jpg"); background-repeat: no-repeat; background-position: center top; width: 200px; height: 200px; border:1px solid #CCCCCC; > style> script type="text/javascript"> function ChangeBgPos ()  var selects = document.getElementsByTagName ("select"); // Returns the selected elements var selectStates = []; for (var i=0; i < selects.length; i++)  var whichSelected = selects[i].selectedIndex; selectStates.push (selects[i].options[whichSelected].text); > var div = document.getElementById ("myDiv"); if ('backgroundPositionX' in div.style) < div.style.backgroundPositionX = selectStates[0]; div.style.backgroundPositionY = selectStates[1]; > else < div.style.backgroundPosition = (selectStates[0] + " " + selectStates[1]); > > script> head> body> div class="example" id="myDiv"> Change the values of the horizontal and vertical image positions. div> br /> select onchange="ChangeBgPos ();" size="3"> option selected="selected" />center option />left option />right select> select onchange="ChangeBgPos ();" size="3"> option />bottom option />center option selected="selected" />top select> body>

Supported by objects:

Источник

Javascript Reference — HTML DOM Style backgroundPosition Property

The backgroundPosition property sets or gets the position of a background-image within an element.

Browser Support

backgroundPosition	Yes	Yes	Yes	Yes	Yes

Syntax

Return the backgroundPosition property:

var v = object.style.backgroundPosition

Set the backgroundPosition property:

object.style.backgroundPosition=value

Property Values

Value	Description
left top	left top, if one value provided, the other value is «center».
left center	left center, if one value provided, the other value is «center».
left bottom	left bottom, if one value provided, the other value is «center».
right top	right top, if one value provided, the other value is «center».
right center	right center, if one value provided, the other value is «center».
right bottom	right bottom, if one value provided, the other value is «center».
center top	center top, if one value provided, the other value is «center».
center center	center center, if one value provided, the other value is «center».
center bottom	center bottom, if one value provided, the other value is «center».
x% y%	x% is the horizontal position and y% is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If one value provided, the other value will be 50%. Default: 0% 0%
xpos ypos	xpos is the horizontal position and ypos is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If one value provided, the other value will be 50%. You can mix % and positions
inherit	inherit the background-position property from the parent element

Technical Details

Default Value:	0% 0%
Return Value:	A string representing the position of a background-image
CSS Version	CSS1

Example

The following code shows how to change the position of a background-image.

 !DOCTYPE html> html> head> style> body !-- w w w . j ava 2s .c o m--> background-image: url('http://java2s.com/style/demo/border.png'); background-repeat: no-repeat; >  body> button type="button" onclick="myFunction()">test script> function myFunction() < document.body.style.backgroundPosition="top right"; >   

The code above is rendered as follows:

Example 2

The following code shows how to change the position of the background-image in a element to center bottom.

 !DOCTYPE html> html> head> style> div !--from w ww. ja va 2s .c om--> background-image: url('http://java2s.com/style/demo/border.png'); background-repeat: no-repeat; width: 400px; height: 400px; border: 1px solid #000000; >  body> button type="button" onclick="myFunction()">test div >"myDiv">  script> function myFunction() < document.getElementById("myDiv").style.backgroundPosition = "center bottom"; >   

The code above is rendered as follows:

Example 3

The following code shows how to change the position of the background-image in a element to 100px horizontal and 40px vertical.

 !DOCTYPE html> html> head> style> div !--from w w w . j av a 2s .c o m--> background-image: url('http://java2s.com/style/demo/border.png'); background-repeat: no-repeat; width: 400px; height: 400px; border: 1px solid #000000; >  body> button type="button" onclick="myFunction()">test div >"myDiv">  script> function myFunction() < document.getElementById("myDiv").style.backgroundPosition = "100px 40px"; >   

The code above is rendered as follows:

Example 4

The following code shows how to get the position of the background-image in a element.

 !DOCTYPE html> html> body> button type="button" onclick="myFunction()">test div >"myDiv" style="background: url('http://java2s.com/style/demo/border.png') no-repeat center;height:500px;width:500px;border:1px solid black;"> !-- w ww . j a v a 2s . c om--> script> function myFunction() < console.log(document.getElementById("myDiv").style.backgroundPosition); >   

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник

Style backgroundPosition Property

The backgroundPosition property sets or returns the position of a background-image within an element.

See Also:

Syntax

Return the backgroundPosition property:

Set the backgroundPosition property:

Property Values

Value	Description
top left top center top right center left center center center right bottom left bottom center bottom right	If you only specify one keyword, the other value will be «center».
x% y%	The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos	The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	0% 0%
Return Value:	A String, representing the position of a background-image
CSS Version	CSS1

Browser Support

backgroundPosition is a CSS1 (1996) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

More Examples

Example

Change the position of the background-image in a element to center bottom:

Example

Change the position of the background-image in a element to 200px horizontal and 40px vertical:

Example

Return the position of the background-image in a element:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How do I change the background image position on a website using javascript?

There are several issues with the code, and partly difficult to track down, but you can get started with debugging by using Developer Tools in your browser. You typically enter them by pressiin the F12 key. The “Console” pane of the tools will show JavaScript errors and other diagnostics.

You will then first see that the colon : causes a syntax errors. In JavaScript, you need to use the assignment operator = .

Having fixed this, you will see that clicking on the button will cause an error message about body.style being undefined. That’s because you have called the document.getElementsByTagName function that returns an array of elements, not a single element. The simplest fix to use just document.body , which refers to the body element.

The remaining bug is more tricky and causes somewhat varying diagnostics in browsers, like “TypeError: size is not a function” in Firefox. The reason is that the invocation size() is inside an event handler in the tag, and there the implied context is the element node. And that node has the size property, which reflects to the HTML markup attribute size . This property is defined even though the markup does not have an explicit attribute; it is then defaulted to a browser-dependent value, typically 20. Anyway, in this context the identifier size denotes that property, which has a numeric value, not a function.

There are two simple ways to fix this bug. You can change the invocation size() to window.size() , thereby referring to the globally defined identifier size (it is global, i.e. a property of the window object, since you define a function with that name at the topmost level). Alternatively, you can change the function name to something else, just avoiding anything that could be a property of the element node. You could use Size for example, or changeBackgroundPosition . So in HTML you could have

function changeBackgroundPosition()

Источник

How to change the background position of an element as a new CSS attribute?

For some reason, it does not create a new attribute in CSS called background-position: center and just adds it to the background property like so:

background: center center rgb(251, 251, 251); 

How do I make it so that changing the background-position will result in (like you can do in inspect element or pure css) in Javascript/jQuery:

background-position: center; 

@Taplar It works after the Javascript is applied — however, on my site, the HTML gets retrieved after every interval (it’s always getting updated) and is saved on the server as a new file. That new file has the background: center center rgb(251, 251, 251); CSS and it does not always display properly (sometimes it does, sometimes it doesn’t). Having a background-position: x always works

I would use all three of these: background-repeat: no-repeat; , background-attachment: fixed; , background-position: center; ,

@Osman Is there any different? the reason is that you set background-color: rgb(251, 251, 251) with css or javascript, and javascript show all of them in background property. If there is difference maybe it’s because priority

2 Answers 2

That’s why sometimes we face compatibility issue among different browsers. Before, they used to be more strict of displaying non valid HTML or CSS. Nowdays, they have more tolerance to non-standard coding but they could also provide unexpected code to force their standards.

What you see is simply the way your browser is rendering your code. I think center center is the default value that the browser uses to distinguish from

Besides, Chrome inspector could be the one playing smart sometimes. This is an example of what’s been «computed» after clicking the button in the following snippet :

$('#styler').on('click',function()< $("#element").css(); var posTxt = $('#element').css('background-position'); var pos = $('#element').css('backgroundPosition'); console.log('Text: '+posTxt); console.log('Like Javascript: '+pos); //It's the same value displayed using pure Javascript var elem = document.getElementById('element'); var tab = window.getComputedStyle(elem,null).backgroundPosition.trim(); console.log('Javascript: '+tab); >);

/*already used style */ #element

[UPDATE] I added a line to this code to show how is jQuery reading the new background position value after setting it to «center». It’s being displayed «50% 50%» which is the same value displayed by window.getComputedStyle(). Just to show you that with different methods even jQuery is not displaying the same property name but prefers to retrieve the computed numerical value. which could be useful for animations, translations.

jQuery also validates those Css Properties before applying them. The code checks for any available custom jQuery.cssHooks (like these), if not it will get ignored.

To conclude, we can’t control how these different programs display these properties. I think what matters is how we Set them properly.

Using jQuery to define each Background property could help you get them separated in the Inspector or override existing properties being mixed up with the one you are creating.

Источник