From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/background-position-x/index.html | 128 ++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/es/web/css/background-position-x/index.html (limited to 'files/es/web/css/background-position-x') diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html new file mode 100644 index 0000000000..cb85bcd824 --- /dev/null +++ b/files/es/web/css/background-position-x/index.html @@ -0,0 +1,128 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

El background-position-x propiedad de CSS  coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.

+ +
{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
+ + + +

The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.

+ +

Syntax

+ +
/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* <percentage> values */
+background-position-x: 25%;
+
+/* <length> values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

The background-position-x property is specified as one or more values, separated by commas.

+ +

Values

+ +
+
left
+
Aligns the left edge of the background image with the left edge of the background position layer.
+
center
+
Aligns the center of the background image with the center of the background position layer.
+
right
+
Aligns the right edge of the background image with the right edge of the background position layer.
+
{{cssxref("<length>")}}
+
The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).
+
{{cssxref("<percentage>")}}
+
The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image.
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Basic example

+ +

The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background-color: skyblue;
+  background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: bottom 10px;
+}
+ +

Result

+ +

{{EmbedLiveSample('Basic_example', '100%', 300)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.background-position-x")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf