How to Center Background Images in CSS

1. Use the Background Properties to Center the Background Image in CSS
2. Use the width, height, left, and top Properties to Center the Background Image in CSS

This tutorial will demonstrate a few methods to center background images in CSS.

Use the Background Properties to Center the Background Image in CSS

We can center the background image in CSS using the different background properties.

We will use the properties like background-image, background-repeat, background-attachment, background-position, and background-size to center the background image. We can also use the background shorthand property to define these various properties.

The background-image property will set the image using the url() function. We use the background-repeat property to define the repeat behavior of the image.

The background-attachment property defines the fixed or scrolling behavior of the background. We can set the starting position of the background with the background-position property.

Finally, we can set the size of the image using the background-size property.

For example, select the html tag in CSS and apply the styles.

First, set a background image using the background-image property. Next, set the background-repeat property to no-repeat.

Then, write the fixed option for the background-attachment property. After that, apply the background-position property to the center center option and the background-size property to cover.

In the following example, the no-repeat option will prevent the image from being repeated. When the background image size is small, the image will be replicated as rows and columns.

The background image will remain fixed when we scroll the page as we have used the fixed option for the background-attachment property. The option center center in the background-position property will place the image at the center horizontally and vertically.

Finally, the cover option will resize the image to cover the entire html container. Hence, we can center the background image using various background properties in CSS.

Example Code:

html{
    background-image: url("/img/DelftStack/logo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

<div></div>

Use the width, height, left, and top Properties to Center the Background Image in CSS

In this method, we will discuss another way of centering the background image in CSS using the properties like width, height, left, and top. We can set the height and width to 100% so that the image will occupy the full height and width of the body tag.

The body element is the parent of the img element. We can use the top and left properties to set the distance of the background image to the top and left elements of the image.

It should be noted that these two properties will only work when the element’s position property is set.

For example, select the img tag and set the width and height properties to 100%. Next, set the position property to fixed. Then, set the left and right properties to 0.

We used the 0 value in the left and right properties to leave no space to the top and left edge of the image with the neighboring element. As a result, the image will fit in the browser’s viewport.

In this way, we can use these various properties to center the background image in CSS.

Example Code:

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

<div>
    <img src="/img/DelftStack/logo.png">
</div>