How to use html/css to center a background picture

How to use html/css to set the background image center, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

In html/css, you can use the background-position attribute to set the background picture center, as long as you add the "background-position: center;" style to the elements that set the background picture, you can set the background picture to be centered in the horizontal and vertical directions.

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

Steps for html/css to center a background picture

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

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

Set the background picture. Create a style tag, and then set the background image, non-repetition, width, and height style for the class bg-img in the tag. Style Code:

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

Save the html code, open it with a browser, and 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 of background-position: center to the bg-img class.

Refresh the browser after saving the html code, and you will find that the background image on the browser is automatically centered.

This is the answer to the question about how to use html/css to set the center of the background picture. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.