From 94b0178d1ab72b178eedee5d40ae9a567a1412eb Mon Sep 17 00:00:00 2001 From: CaptainTech205 <9319730+CaptainTech205@users.noreply.github.com> Date: Fri, 6 Feb 2026 18:20:35 +0100 Subject: [PATCH 1/4] First version of this markdown --- .../background-position-x.md | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 content/css/concepts/background/terms/background-position-x/background-position-x.md 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..6569ad2f91c --- /dev/null +++ b/content/css/concepts/background/terms/background-position-x/background-position-x.md @@ -0,0 +1,62 @@ +--- +Title: CSS background-position-x +Description: Sets the inital horizontal position of a background image. +Subjects: + - CSS + - Web design + - Web Development +Tags: + - Layout + - Background + - HTML +CatalogContent: + - Learn CSS + - UX Designer + - Learn Intermediate CSS + - Front-End Engineer + - Full-Stack Engineer +--- +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 +```css +/* Keyword values */ +background-position-x: left; +background-position-x: right; +background-position-x: center; + +/* Length and percentage values */ +background-position-x: 64px; +background-position-x: 25%; +background-position-x: 5em; +background-position-x: 1cm; + +/* Global values */ +background-position-x: inherit; +background-position-x: initial; +background-position-x: revert; +background-position-x: revert-layer; +background-position-x: 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: 500px; + height: 500px; + background-image: url("https://i.pcmag.com/imagery/reviews/05XBKmNFYeHCMIn726Nohqb-10..v1627594235.png"); + background-repeat: no-repeat; + background-position-x: center; +} +``` \ No newline at end of file From 4f725bf21805f140435b8193857a18f47ff64ea2 Mon Sep 17 00:00:00 2001 From: CaptainTech205 <9319730+CaptainTech205@users.noreply.github.com> Date: Sat, 14 Feb 2026 13:44:36 +0100 Subject: [PATCH 2/4] Fixed requested changes in PR #8224 --- .../background-position-x.md | 60 ++++++++---------- media/css_background_position_x_example.png | Bin 0 -> 3597 bytes 2 files changed, 26 insertions(+), 34 deletions(-) create mode 100644 media/css_background_position_x_example.png 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 index 6569ad2f91c..4bb2a25cf72 100644 --- 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 @@ -1,46 +1,34 @@ --- Title: CSS background-position-x Description: Sets the inital horizontal position of a background image. -Subjects: - - CSS - - Web design - - Web Development +Subjects: + - 'Web Design' + - 'Web Development' Tags: - - Layout - - Background - - HTML + - 'CSS' + - 'Background' + - 'Positioning' + - 'Properties' + - 'Layout' CatalogContent: - - Learn CSS - - UX Designer - - Learn Intermediate CSS - - Front-End Engineer - - Full-Stack Engineer + - '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 -```css -/* Keyword values */ -background-position-x: left; -background-position-x: right; -background-position-x: center; - -/* Length and percentage values */ -background-position-x: 64px; -background-position-x: 25%; -background-position-x: 5em; -background-position-x: 1cm; - -/* Global values */ -background-position-x: inherit; -background-position-x: initial; -background-position-x: revert; -background-position-x: revert-layer; -background-position-x: unset; +```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. @@ -53,10 +41,14 @@ In the following example we use the HTML div tag to set the background image wit ### CSS ```css div { - width: 500px; - height: 500px; - background-image: url("https://i.pcmag.com/imagery/reviews/05XBKmNFYeHCMIn726Nohqb-10..v1627594235.png"); + width: 300px; + height: 300px; + background-color: grey; + background-image: url("../../../../../../media/cc_logo.png"); background-repeat: no-repeat; background-position-x: center; } -``` \ No newline at end of file +``` + +### 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 0000000000000000000000000000000000000000..7f14eb01bb1d9eb81d8c99b385db36f3048cc304 GIT binary patch literal 3597 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 WjCnqCxe0i}f#9wlhiT3yFaHC++gnWl literal 0 HcmV?d00001 From cefc1280c432ea0a855c8cf2ea15344a9b8942b4 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Tue, 24 Feb 2026 13:21:36 +0530 Subject: [PATCH 3/4] Revise background-position-x documentation Updated the documentation for the background-position-x property, including changes to the title, description, parameters, and examples. --- .../background-position-x.md | 73 +++++++++++-------- 1 file changed, 44 insertions(+), 29 deletions(-) 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 index 4bb2a25cf72..c40e302c465 100644 --- 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 @@ -1,54 +1,69 @@ --- -Title: CSS background-position-x -Description: Sets the inital horizontal position of a background image. +Title: 'background-position-x' +Description: 'Sets the horizontal position of a background image.' Subjects: - - 'Web Design' - - 'Web Development' + - 'Web Design' + - 'Web Development' Tags: - - 'CSS' - - 'Background' - - 'Positioning' - - 'Properties' - - 'Layout' + - 'CSS' + - 'Background' + - 'Layout' + - 'Positioning' + - 'Properties' CatalogContent: - - 'learn-css' - - 'paths/front-end-engineer-career-path' + - '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. +The CSS background-position-x property sets the horizontal (x-axis) position of a background image. The position is calculated relative to the box defined by the [`background-origin`](https://www.codecademy.com/resources/docs/css/background/background-origin) property. + +If the `background` or [`background-position`](https://www.codecademy.com/resources/docs/css/background/background-position) shorthand properties are declared after `background-position-x`, their values override it. + +By default, a background image is positioned at the top-left corner of an element and repeated both horizontally and vertically. ## 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` +**Parameters:** + +- `value` can be one of the following: + + - **Position keywords:** `left`, `center`, `right` + - **Length values:** `10px`, `2em`, `1cm` + - **Percentage values:** `25%` + - **Keyword and offset combinations:** `left 20px`, `right 10%` + - **Comma-separated values (for multiple background layers):** `left`, `right` + - **Global values:** `inherit`, `initial`, `revert`, `revert-layer`, `unset` + +When multiple background images are used, values are applied in order, separated by commas. ## Example -In the following example we use the HTML div tag to set the background image with CSS. -### HTML +In this example, a `div` element is styled with a centered background image using `background-position-x`: + +The HTML code is: + ```html
``` -### CSS +The CSS code is: + ```css div { - width: 300px; - height: 300px; - background-color: grey; - background-image: url("../../../../../../media/cc_logo.png"); - background-repeat: no-repeat; - background-position-x: center; + 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 +The output of this code is: + +![A 300 by 300 pixel grey square with a background image centered horizontally at the top of the container, not repeated.](https://raw.githubusercontent.com/Codecademy/docs/main/media/css_background_position_x_example.png) From dadabc2c267339f60b29ecb63c15440d281defb5 Mon Sep 17 00:00:00 2001 From: Mamta Wardhani Date: Tue, 24 Feb 2026 13:22:06 +0530 Subject: [PATCH 4/4] Enhance background-position-x property description Updated the description of the background-position-x property to emphasize its formatting. --- .../terms/background-position-x/background-position-x.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index c40e302c465..8493e78dfbd 100644 --- 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 @@ -15,7 +15,7 @@ CatalogContent: - 'paths/front-end-engineer-career-path' --- -The CSS background-position-x property sets the horizontal (x-axis) position of a background image. The position is calculated relative to the box defined by the [`background-origin`](https://www.codecademy.com/resources/docs/css/background/background-origin) property. +The CSS **`background-position-x`** property sets the horizontal (x-axis) position of a background image. The position is calculated relative to the box defined by the [`background-origin`](https://www.codecademy.com/resources/docs/css/background/background-origin) property. If the `background` or [`background-position`](https://www.codecademy.com/resources/docs/css/background/background-position) shorthand properties are declared after `background-position-x`, their values override it.