How to Center Background Images in CSS

To center an image used as a CSS background, set background-position: center. Add background-size: cover when the image should fill its container; this preserves the image’s aspect ratio and may crop its edges. Set background-repeat: no-repeat when you want one image rather than a tiled pattern. These properties control different things: position places the image, size scales it, and repeat determines whether it tiles.

Use the Background Properties to Center the Background Image in CSS

Put the background on the element whose area should display it. In this example, .hero fills at least the viewport height. Replace photo.jpg with the path to your image.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .hero {
      min-height: 100vh;
      background-image: url("photo.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  </style>
</head>
<body>
  <main class="hero"></main>
</body>
</html>

background-position: center centers the image horizontally and vertically within .hero. The two-word value center center means the same thing. background-size: cover scales the image until the whole container is covered, so a differently shaped image can be cropped along one axis. If you need the entire image visible, use background-size: contain; this can leave unused space in the container. To preserve the image’s natural dimensions, omit background-size.

background-repeat: no-repeat prevents tiling; it does not resize or center the image. The default repeat behavior can create tiles when the image is smaller than its container, so use no-repeat when that is not intended. background-attachment controls whether a background scrolls with the page or remains fixed relative to the viewport. It is optional and does not center the image. You can write these declarations in the background shorthand, but separate properties make each choice easier to adjust.

Run this example to format the same declarations as CSS text for copying into a stylesheet:

const declarations = {
  backgroundImage: 'url("photo.jpg")',
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center",
  backgroundSize: "cover"
};

for (const [property, value] of Object.entries(declarations)) {
  const cssName = property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
  console.log(`${cssName}: ${value};`);
}

background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;

Position an Image Element as a Full-Viewport Alternative

An img element is a separate alternative when the image is content or must be available to assistive technology; it is not a CSS background. To make it fill the viewport behind page content, give it fixed positioning and offsets on all four sides, then place it behind the content. The position property is needed for top, right, bottom, and left to place the element this way.

<img class="viewport-image" src="photo.jpg" alt="">
<main class="page-content">
  <h1>Page content</h1>
</main>
<style>
  .viewport-image {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
</style>

Here inset: 0 sets top, right, bottom, and left to zero, making the positioned box span the viewport. object-fit: cover scales the image to fill that box while preserving its proportions, and can crop it. Use object-fit: contain to show the full image, with possible unused space. The empty alt is appropriate only when the image is decorative; provide meaningful alternative text if it conveys information. For an actual page, ensure foreground text remains readable over the image. If the goal is only a decorative background, the first method is simpler and does not add an image element to the document.