CSS background-position-y Vertical Image Positioning

Introduction

The background-position-y CSS property allows you to control the vertical position of a background image within an element. This property is part of the CSS Backgrounds and Borders Module Level 4 specification, which standardizes how background images are positioned. For detailed information, please refer to the official specification:

• CSS Backgrounds and Borders Module Level 4 - background-position-longhands

Understanding this specification ensures that your CSS code is compliant with the latest standards.

Syntax

The background-position-y property is easy to use and offers various value types. Here’s the basic syntax:

background-position-y: value;

Keyword Values

• top: Aligns the top edge of the image with the top of the element.
• center: Centers the image vertically.
• bottom: Aligns the bottom edge of the image with the bottom of the element.

Percentage Values

• <percentage>: Positions the image as a percentage of the element’s height. For example, 50% centers the image.

Length Values

• <length>: Positions the image using units like pixels (px), centimeters (cm), or ems (em).

Side-relative Values

• bottom <length>: Offsets the image from the bottom edge by a specified length.
• bottom <percentage>: Offsets the image from the bottom edge by a specified percentage.

Multiple Values

• You can specify multiple values separated by commas for multiple background images.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the value to its default (0%).
• revert: Rolls back the value to the user agent stylesheet’s default.
• revert-layer: Reverts the value to the value of the previous cascade layer.
• unset: Resets the value to its natural value (inherit or initial).

Example Syntax

/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* 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;
background-position-y: bottom 10%;

/* Multiple values */
background-position-y: 0px, center;

/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;

Values

The background-position-y property accepts several value types to position background images vertically.

Keyword Values

• top: Aligns the top edge of the image with the top of the element.
• center: Centers the image vertically.
• bottom: Aligns the bottom edge of the image with the bottom of the element.

Percentage Values

• <percentage>: Positions the image as a percentage of the element’s height. For example, 50% centers the image.

Length Values

• <length>: Positions the image using units like pixels (px), centimeters (cm), or ems (em).

Side-relative Values

• bottom <length>: Offsets the image from the bottom edge by a specified length.
• bottom <percentage>: Offsets the image from the bottom edge by a specified percentage.

Multiple Values

• You can specify multiple values separated by commas for multiple background images.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the value to its default (0%).
• revert: Rolls back the value to the user agent stylesheet’s default.
• revert-layer: Reverts the value to the value of the previous cascade layer.
• unset: Resets the value to its natural value (inherit or initial).

Formal Syntax

The formal syntax for background-position-y is:

background-position-y =
  [
    [ center | [ top | bottom | y-start | y-end ] [ <length-percentage>? ] ]
    | [ left | right | x-start | x-end ] [ <length-percentage>? ]
  ]#

<length-percentage> =
  <length>
  | <percentage>

Explanation

• Keywords: center, top, bottom, y-start, y-end
• Length and Percentage Values: <length> (e.g., px, cm, em) or <percentage>
• Side-relative Values: bottom <length>, bottom <percentage>
• Multiple Values: Separated by commas for multiple background images

Examples

Here are some practical examples to help you understand how to use background-position-y.

Basic Example

This example centers a background image horizontally and aligns it to the bottom vertically.

HTML

<div></div>

CSS

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

Side-relative Values

This example offsets the background image from the bottom edge.

HTML

<div></div>

CSS

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

Multiple Background Images

You can also use background-position-y to position multiple background images.

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: lightgray;
  background-image: url('https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png'), url('https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png');
  background-repeat: no-repeat, no-repeat;
  background-position-x: center, right;
  background-position-y: top, bottom;
}

Additional Examples

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url('https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png');
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background-color: lightblue;
  background-image: url('https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png');
  background-repeat: no-repeat;
  background-position-x: left 15px;
  background-position-y: top 15px;
}

Benefits of Side-Relative Values

• Precision: Allows for precise positioning of background images.
• Flexibility: Gives you the flexibility to create complex layouts.
• Responsiveness: Helps create designs that adapt to different screen sizes.

Browser Compatibility

The background-position-y property is widely supported across modern browsers:

• Google Chrome: Version 1+
• Microsoft Edge: Version 12+
• Mozilla Firefox: Version 49+
• Opera: Version 15+
• Safari: Version 1+

Browser Compatibility Table

Best Practices

• Fallbacks: Use the background-position shorthand as a fallback.
• Feature Detection: Check if the browser supports background-position-y.
• Progressive Enhancement: Provide a basic experience with enhancements for modern browsers.

Example of Fallback

div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url('https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png');
  background-repeat: no-repeat;

  /* Fallback for older browsers */
  background-position: center bottom;

  /* Modern browsers */
  background-position-x: center;
  background-position-y: bottom;
}

Conclusion

Understanding background-position-y helps you control the vertical positioning of background images effectively. Use fallbacks, feature detection, and progressive enhancement to ensure compatibility across different browsers. Stay updated with the latest browser compatibility information to provide the best user experience.

See Also

• background-position
• background-position-x
• Using multiple backgrounds
• CSS Backgrounds and Borders Module
• CSS Animations
• CSS Flexbox
• CSS Grid Layout

These resources will help you enhance your knowledge of CSS background properties and improve your web design skills.