Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS background-position-y Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 9 - Views
⏳ 4 mins
💬 1 Comment
CSS background-position-y Property

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
Copy To Clipboard
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

ValueDescription
topAligns the background image to the top of the element.
centerCenters the background image vertically within the element.
bottomAligns the background image to the bottom of the element.
percentageDefines the vertical position as a percentage of the element's height. For example, 50% centers the image vertically.
lengthDefines 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy