Home > Article > Web Front-end > How to center the background image in css? Introduction to the method of centering the background image (code example)

How to center the background image in css? Introduction to the method of centering the background image (code example)

青灯夜游Original: 2018-10-19 14:56:3751561browse

In the development of front-end pages, there are two ways to display pictures, namely: img tag displays pictures, and the background attribute is set to display background pictures. We know that img images can be centered, so can background images be centered? How to center the background image? This article will introduce to you how to center the background image in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s take a look at how to center the background image on the browser using css?

In fact, it is very simple. The background-position attribute in CSS can achieve the horizontal and vertical center alignment of the background image. Below we use a simple code example to introduce how the background-position attribute sets the background. The image is displayed in the center.

We first use the background attribute to display the background image:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        background-image:url(How to center the background image in css? Introduction to the method of centering the background image (code example)) ;
		        background-size:200px 160px ;
		        background-repeat:no-repeat ;
			}
		</style>
	</head>
	<body>
		<div class="demo">
		
		</div>
	</body>
</html>

Rendering:

How to center the background image in css? Introduction to the method of centering the background image (code example)

Next let’s look at the background-position attribute Settings:

1. Background-position uses pixels to center the background image (know the size of the background image)

In the example, the lower right corner of the background image coincides with the center of the demo box. To make the background To center the image, you need to make the center of the background image coincide with the center of the demo box. You need to move the background image half of the height downward and half of the width to the right. Therefore, by adding the following code to css, you can center the background image

background-position:100px 70px ;  /*宽的一半，高的一半*/

Rendering:

How to center the background image in css? Introduction to the method of centering the background image (code example)

2. Use 50 for background-position % Set the background image to be centered, which is very convenient

background-position:50% 50% ;

3. background-position Use center to center the background image, which is very convenient. (The second center can be omitted)

background-position:center center;

The above three setting methods of background-position can all achieve the centering of the background image. The first value of the background-position attribute sets the horizontal position, and the second A value sets the vertical position; you can decide which method to use depending on your situation. I hope it will be helpful to everyone's learning. For more related tutorials, please visit CSS3 video tutorial, Html5 video tutorial, bootstrap video tutorial!

[Related article recommendations]

How to center the img image in css? The display attribute of css implements image centering (code example)

3 ways to use css positioning to center the img image (code example)

The above is the detailed content of How to center the background image in css? Introduction to the method of centering the background image (code example). For more information, please follow other related articles on the PHP Chinese website!

html5 css bootstrap css3 display position background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement progress bar in css3? Introduction to the implementation method of progress bar in css3Next article：How to implement progress bar in css3? Introduction to the implementation method of progress bar in css3

See more

How to center the background image in css? Introduction to the method of centering the background image (code example)

Related articles