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"

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

background-position: centerin the bg-img class.

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!