Skip to content

First version of the css background-position-x property markdown #8224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CaptainTech205 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

First version of the css background-position-x property markdown #8224

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions ...nt/css/concepts/background/terms/background-position-x/background-position-x.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<div>
</div>
```

### 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;
}
```