📌 Introduction

The background-position property in CSS controls where a background image is placed inside an element. It determines the starting point of the image before repeating or scaling occurs. This property is crucial when designing hero sections, patterns, cards, icons, and precise UI layouts. 🎨✨

🎯 What Does background-position Do?

✨ Syntax

selector {
  background-position: <x-position> <y-position>;
}

🧩 Accepted Values

1. Keyword Values

The simplest way to position a background image.

background-position: left top;
background-position: center;
background-position: right bottom;
background-position: left center;
background-position: center bottom;

2. Percentage Values

Percentages position the **background image relative to the element**, but also relative to the **image size**, making it great for responsive layouts.

background-position: 50% 50%; /* center */
background-position: 0% 100%; /* left bottom */
background-position: 80% 20%;

3. Length (px, rem, etc.)

Allows precise pixel-based control — ideal for icon positioning or sprite sheets.

background-position: 20px 40px;
background-position: 10rem 5rem;

4. Combination Values

background-position: left 20px top 40px;
background-position: right 10px bottom 15px;

5. Multiple Background Layers

background-image: url("icon.png"), url("pattern.png");
background-position: 10px 10px, center;

🔥 Practical Examples

1. Centered Hero Background

.hero {
  background-image: url("hero.jpg");
  background-position: center center;
  background-size: cover;
}

2. Align Image to the Bottom

.card {
  background-image: url("pattern.png");
  background-position: bottom;
}

3. Precise Positioning for Icons

.icon {
  background-image: url("sprite.png");
  background-position: -32px -64px; /* selects part of a sprite */
}

4. Responsive Positioning

.responsive {
  background-image: url("hero.jpg");
  background-position: 50% 70%; /* tilt focus downwards */
  background-size: cover;
}

5. Mixed Values (keyword + length)

.avatar {
  background-image: url("avatar.jpg");
  background-position: left 10px top 20px;
}

📊 Keyword Cheatsheet

🧠 How Percentages Work (Important!)

Percentages position the background **relative to both the element and image size**.
Example:

background-position: 0% 50%;  
/* image left edge aligns with element’s left edge */

🖼️ Visual Demo

🎉 Conclusion

The background-position property gives you precise control over how background images are placed inside an element. Whether you're designing hero banners, using sprites, or creating texture-based layouts, understanding keywords, percentages, and length values will help you create beautiful, balanced, and effective UI backgrounds. 🚀