Posted inFront-End Web Design

CSS background-position Property – Control Like a Pro

June 30, 2025Posted inFront-End, Web Design
CSS background-position Property – Control Like a Pro


Originally published on Makemychance.com

If you’re working with background images in CSS, then you’ve probably used background-image, background-size, and maybe background-repeat. But one underrated and super useful property is background-position.

This single property gives you full control over where your background image appears inside an element — which is crucial for responsive design, hero sections, custom banners, and more.

Let’s break it down, the practical way.

🔍 What is background-position?

The background-position property defines the starting position of a background image inside its container.

🔧 Syntax

background-position: <x> <y>;
  • <x> = horizontal position
  • <y> = vertical position

🧪 Example

.hero {
  background-image: url('banner.jpg');
  background-position: center center;
  background-size: cover;
  height: 400px;
}

Here, the background image is centered both horizontally and vertically.

🎯 Common Values You’ll Actually Use

ValueMeaning
left topTop-left corner (default)
center centerCenter of the container
right bottomBottom-right corner
50% 50%Same as center center
10px 20px10px from left, 20px from top
right 20px20px from right edge
top 50%Center vertically, align to top horizontally

📸 Visual Example

.card {
  background: url('photo.jpg') no-repeat;
  background-position: right bottom;
  background-size: 100px;
  width: 300px;
  height: 200px;
}

This puts the image in the bottom-right corner of the .card.

💡 Use With background-size

Using background-position works best when combined with background-size, like so:

.section {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
}

This setup is perfect for full-width banners or responsive sections.

🔁 Shorthand Combo

Instead of writing multiple lines:

background-image: url('image.jpg');
background-size: cover;
background-position: center;

You can use the shorthand:

background: url('image.jpg') center / cover no-repeat;

Saves time and keeps your CSS cleaner.

📱 Responsive Design Tip

Sometimes when using cover, the image may crop strangely. That’s where background-position saves the day.

Try adjusting like this:

background-position: center top;

This ensures the top of the image always stays visible, which is great for faces or text in images.

🚫 Common Mistake

Using values like:

background-position: center;

This only sets the horizontal axis. Always use both x y for clarity unless you’re sure.

/* Better */
background-position: center center;

🧠 Final Thoughts

The background-position property is simple but super powerful. Whether you’re aligning an image in a small card or setting a large full-page background — this property gives you full control over how and where your image is displayed.

If you’re already using background-size: cover or contain, just pair it with background-position to make your layout look perfect.

Need a ready-made hero section template using this? I’ve got one.

Last updated on June 30, 2025