{{CSSRef}}
Summary
The background-position-y
CSS property sets the initial vertical position, relative to the background position layer defined by {{cssxref("background-origin")}} for each defined background image. For more information, see the {{cssxref("background-position")}} property, which has been widely supported for much longer.
Note: 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 the
background-position-x
CSS property.{{cssinfo}}
Syntax
/* Keyword values */ background-position-y: top; background-position-y: bottom; background-position-y: center; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; /* Multiple values */ background-position-y: 0px, center; /* Global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset;
Formal syntax
{{csssyntax}}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}} | {{Spec2('CSS4 Backgrounds')}} | Initial specification of longhand subproperties of background-position, to match longstanding implementations. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("49.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Two-value syntax (support for offsets from any edge) | {{CompatUnknown}} | {{CompatGeckoDesktop("49.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoMobile("49.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatVersionUnknown}} |
Two-value syntax (support for offsets from any edge) | {{CompatUnknown}} | {{CompatGeckoMobile("49.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
See also
- {{cssxref("background-position")}}
- {{cssxref("background-position-x")}}
- {{cssxref("background-position-inline")}}
- {{cssxref("background-position-block")}}
- Multiple backgrounds