diff --git a/content/css/concepts/background/terms/background-position-x/background-position-x.md b/content/css/concepts/background/terms/background-position-x/background-position-x.md new file mode 100644 index 00000000000..4bb2a25cf72 --- /dev/null +++ b/content/css/concepts/background/terms/background-position-x/background-position-x.md @@ -0,0 +1,54 @@ +--- +Title: CSS background-position-x +Description: Sets the inital horizontal position of a background image. +Subjects: + - 'Web Design' + - 'Web Development' +Tags: + - 'CSS' + - 'Background' + - 'Positioning' + - 'Properties' + - 'Layout' +CatalogContent: + - 'learn-css' + - 'paths/front-end-engineer-career-path' +--- +The CSS **background-position-x** property sets the initial horizontal position (the x axis) of a background image. This position is defined relative to the coordinate system established by the [background-origin](https://www.codecademy.com/resources/docs/css/background/background-origin) property. + +Note that the value of background-position-x is overridden by any subsequent declarations of the background or [background-position](https://www.codecademy.com/resources/docs/css/background/background-position) shorthand properties. By default, a background image is placed at the top-left corner of an element and repeated both vertically and horizontally. + +## Syntax +```pseudo +background-position-x: value; +``` + +### Parameters +Value can be one of the following: +- Position keyword: `left`, `right`, `center` +- Length and percentage values: `64px`, `5em`, `1cm`, `25%` +- Global values: `inherit`, `initial`, `revert`, `revert-layer`, `unset` + +## Example +In the following example we use the HTML div tag to set the background image with CSS. + +### HTML +```html +
+
+``` + +### CSS +```css +div { + width: 300px; + height: 300px; + background-color: grey; + background-image: url("../../../../../../media/cc_logo.png"); + background-repeat: no-repeat; + background-position-x: center; +} +``` + +### Result +![alt text](../../../../../../media/css_background_position_x_example.png "Example result") \ No newline at end of file diff --git a/media/css_background_position_x_example.png b/media/css_background_position_x_example.png new file mode 100644 index 00000000000..7f14eb01bb1 Binary files /dev/null and b/media/css_background_position_x_example.png differ