How to center a (background) image within a div?

Manage background image properties

CSS-dictator meeting: 
  position: Center!
  size: Cover!
  repeat: No! (Just like my favourite movie) 

To center the background image in a div, let's get familiar with the CSS royalty involved:

• background-position: Controls the starting block like a race. By declaring it as center or 50% 50%, the image finds its home in the center both horizontally and vertically.

• background-size: Acts as the image's personal stylist. **cover ensures the image stays stylish and covers the entire div, even if a little is trimmed off to maintain aesthetics.

• background-repeat: Functions like a strict entrepreneur, deciding the tiling norms of the image. Assigning no-repeat ensures the image doesn't duplicate within the div.

By aligning these properties, you achieve envious centering for a variety of scenarios.

Centering scenarios to rule them all

Commanding the full coverage background scenario

Like a king whose rule spans his entire kingdom, if you want the image to own the div, achieve this in your rule-book (CSS):

div {
  background-image: url('awesome-image.jpg'); // Your kingdom map here
  background-position: center; // Sit on the throne
  background-size: cover;   // Rule the entire kingdom
  background-repeat: no-repeat; // One image, one kingdom
}


Maintaining original size

This is when the image likes its vanilla size but still wants to shine in the center of the div:

div {
  background-image: url('awesome-image.jpg');
  background-position: center;   // Go show-off in the center
  background-repeat: no-repeat;  // You are the one and only
}


Sprite sheet: An array of positions

Think of sprite sheets as a filmstrip, and you are the director deciding the scene:

div {
  background-image: url('spritesheet.png');
  background-position: 50% 75%; // Cutting the movie at the right scene
  background-repeat: no-repeat; // This ain't no film series
}


Checking the axis with the horizontal or vertical alignment

For divs that like balancing yin and yang along one axis:

• Vertically:

  div {
    background-image: url('awesome-image.jpg');
    background-position: center 50%; // Staying centered like a yogi
    background-repeat: no-repeat;
  }


• Horizontally:

  div {
    background-image: url('awesome-image.jpg');
    background-position: 50% center; // Making way right in the middle
    background-repeat: no-repeat;
  }


Deck of multiple background images

More the merrier! Stack multiple background images and still center them:

div {
  background-image: url('img1.jpg'), url('img2.jpg');
  background-position: center, center; // Everyone gets a seat in the center
  background-repeat: no-repeat, no-repeat; // Each image is a unique entity
}


These images are layered with love, like a rich lasagna.

Pinning down responsive centering

In the landscape of responsive design, accessibility is key. Here the image is a well-trained soldier dynamically adjusting to varying screen sizes:

div {
  background-image: url('awesome-image.jpg');
  background-position: center; // Stays in center
  background-repeat: no-repeat;
  // Adapts to cover the full width of the div, all the time
  background-size: 100% auto; 
}

@media screen and (max-width: 600px) {
  div {
    // Adjusts to cover the full height of the div on smaller screens
    background-size: auto 100%; 
  }
}


This way, your image not only looks perfect on any device but also enhances the user interface.

Extending support to older browsers

CSS is quite the wizard in recent times, but some of us still live in a muggle world of older browsers. To keep them from feeling left out, include fallbacks:

div {
  background-image: url('awesome-image.jpg');
  background-repeat: no-repeat;
  background-position: center; // Default: Centered for browsers that speak the modern CSS dialect
  background-position-x: 50%;  // Fallback: Horizontal center for older IE muggles
  background-position-y: 50%;  // Fallback: Vertical center for older IE muggles
}
