CSS background-position Property

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>

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.

ValueExplanation
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 yposSpecifies 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>

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>

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>

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>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author