How to set the background image to be centered in html/css

In html/css, you can use the background-position attribute to set the background image to be centered. You only need to add the "background-position: center;" style to the element where the background image is set, and you can set the background image to be in the center. Centered horizontally and vertically.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

html/css steps to set the background image to be centered

Open the front-end development tool and create a new html code page

Create a div tag for setting the background color on the html code page, and then add class = "bg-img"

to this tag ##Set background image. Create a style tag, and then set the background image, non-repeating image, width, and height styles for the class bg-img in the tag. Style code:

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

Save the html code and open it with a browser. At this time, you will find that the background image on the browser is displayed in the upper left corner.

Go back to the html code page and add the style

background-position: center in the bg-img class.

After saving the html code and refreshing the browser, you will find that the background image on the browser has been automatically centered.

Recommended tutorials: "

html video tutorial", "CSS video tutorial"

The above is the detailed content of How to set the background image to be centered in html/css. For more information, please follow other related articles on the PHP Chinese website!