CSS background-position-y Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The background-position-y property in CSS allows you to control the vertical position of a background image within an element. It is a part of the background-position shorthand property but can be used independently to precisely adjust the vertical placement of the background image without affecting the horizontal position.

💡 Syntax

The syntax for the background-position-y property is straightforward. You can set it using keywords, percentage values, or length values.

Syntax

Copied

element {
  background-position-y: value;
}

🎛️ Default Value

The default value of the background-position-y property is top, which places the background image at the top edge of the element.

🏠 Property Values

Value	Description
top	Aligns the background image to the top of the element.
center	Centers the background image vertically within the element.
bottom	Aligns the background image to the bottom of the element.
percentage	Defines the vertical position as a percentage of the element's height. For example, 50% centers the image vertically.
length	Defines the vertical position using a length value (e.g., 10px, 2em). Positive values move the image down, and negative values move it up.

📄 Example

In this example, we'll position a background image at the bottom of a div element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS background-position-y Example</title>
  <style>
    .background-example {
      width: 300px;
      height: 200px;
      background-image: url('example-image.jpg');
      background-position-y: bottom;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>Background Positioned at the Bottom</h1>
  <div class="background-example"></div>
</body>
</html>

🖥️ Browser Compatibility

The background-position-y property is widely supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It also has good support in older versions of these browsers, making it a reliable choice for controlling background image placement.

🎉 Conclusion

The background-position-y property provides fine control over the vertical positioning of background images, allowing you to create visually appealing designs that align with your layout requirements.

By adjusting this property, you can ensure that your background images are placed exactly where you want them, enhancing the overall look and feel of your web projects.