CSS Tutorial

Why CSSCSS EditorsCSS How toCSS Comments

CSS Basic Properties

CSS ColorCSS backgroundCSS borderCSS border-styleCSS border-colorCSS border-widthCSS border-radiusCSS border-imageCSS outlineCSS marginCSS paddingCSS list-styleCSS PositionCSS fontCSS floatCSS clearCSS overflowCSS scroll-behaviorCSS transitionCSS animation

CSS Width

CSS widthCSS max-widthCSS min-width

CSS Height

CSS heightCSS max-heightCSS min-height

CSS Spacing

CSS letter-spacingCSS word-spacingCSS word-wrapCSS word-breakCSS white-space

CSS Text Formatting

CSS font-size-adjustCSS font-kerningCSS fontCSS text-alignCSS text-align-lastCSS text-decoration-lineCSS text-decoration-styleCSS text-decoration-colorCSS text-decorationCSS text-transformCSS text-indentCSS directionCSS text-shadowCSS text-overflowCSS vertical-alignCSS unicode-bidiCSS writing-modeCSS all

CSS Pre

CSS tab-size

CSS Tables

CSS border-spacingCSS border-collapseCSS caption-sideCSS empty-cellsCSS table-layout

CSS Image

CSS Image SpritesCSS object-fitCSS object-positionCSS clip-pathCSS filterCSS mix-blend-mode

CSS Isolation

CSS isolation

CSS Content

CSS contentCSS counter-incrementCSS counter-reset

CSS Quotation

CSS quotesCSS hanging-punctuation

CSS Visibility

CSS visibilityCSS displayCSS opacityCSS z-indexCSS backface-visibility

CSS Flexbox

CSS flexboxCSS justify-contentCSS flex-directionCSS flex-wrapCSS flex-flowCSS align-itemsCSS align-contentCSS orderCSS flex-growCSS flex-shrinkCSS flex-basisCSS flexCSS align-self

CSS grid

CSS grid layoutCSS grid-template-rowsCSS grid-template-columnsCSS grid-template-areasCSS grid-templateCSS grid-auto-rowsCSS grid-auto-columnsCSS grid-auto-flowCSS gridCSS grid-row-startCSS grid-column-startCSS grid-row-endCSS grid-column-endCSS grid-rowCSS grid-columnCSS grid-areaCSS grid-row-gapCSS grid-column-gapCSS grid-gap

CSS Mouse

CSS cursorCSS pointer-eventsCSS caret-colorCSS user-select

CSS Transform

CSS transformCSS transform-originCSS transform-styleCSS perspectiveCSS perspective-origin

CSS Column

CSS columnsCSS column-countCSS column-fillCSS column-gapCSS column-ruleCSS column-rule-colorCSS column-rule-styleCSS column-rule-widthCSS column-spanCSS column-width

CSS Box

CSS box-decoration-breakCSS hyphensCSS resizeCSS box-sizingCSS box-shadow

CSS Print

CSS page-break-afterCSS page-break-beforeCSS page-break-inside

CSS @ Rules

CSS @charsetCSS @font-faceCSS @keyframesCSS @mediaCSS @import

CSS Reference

CSS lengthCSS Animatable PropertiesCSS Selectors

CSS background-position Property

Last Updated:

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 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.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
background-positionYesYesYesYesYesYesYesYesYesYesYesYesYes

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>

Share this Page

Meet the Author