CSS background-position Property

February 10, 2021 12:37 pm IST

You are Here:

CSS background-position Property

CSS background-position property sets the initial position for each background image.

Note: The position is relative to the position layer set by background-origin.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("ocean.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; color: #ffffff; } </style> </head> <body> <h1>CSS background-position Property</h1> <p>CSS background-position to 'center'</p> </body> </html>

Run

Syntax

Using CSS

element{ background-position: 25px 100px; }

Using Javascript

object.style.backgroundPosition="25px 100px";

Animatable

Yes, background-position property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS background-position property is 0% 0%.

Property Value

The following table provides a list of values for CSS background-position property.

Value	Explanation
left top left center left bottom center top center center center bottom right top right center right bottom	Specifies the background-position in text.
x% y%	Specifies the background-position in percentage. For example, 25% 50%. The first value is the horizontal position and the second value is the vertical.
xpos ypos	Specifies the background-position in any css length. For example, 25px 100px. The first value is the horizontal position and the second value is the vertical.

Using Text Value

In the following example, we will use text value for background-position to center the background image.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("apple.png"); background-repeat: no-repeat; background-position: center center; height: 300px; } </style> </head> <body> <h1>CSS background-position Property</h1> <p>CSS background-position to 'center center'</p> </body> </html>

Run

Using Percentage Value

In the following example, we will use percentage value for background-position to set the background image to a desire place.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("apple.png"); background-repeat: no-repeat; background-position: 20% 30%; height: 300px; } </style> </head> <body> <h1>CSS background-position Property</h1> <p>CSS background-position in 'percentage'</p> </body> </html>

Run

Using Length Value

In the following example, we will use length value for background-position to set the background image to a desire place.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("apple.png"); background-repeat: no-repeat; background-position: 25px 100px; height: 300px; } </style> </head> <body> <h1>CSS background-position Property</h1> <p>CSS background-position to 'length'</p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS background-position property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("apple.png"); background-repeat: no-repeat; } </style> </head> <body> <h1>CSS background-position Property</h1> <p>CSS background-position to 'center'</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("body")[0]; function myFunction(){ x.style.backgroundPosition = "25px 100px"; } </script> </body> </html>

Run