How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text)-CSS Tutorial-php.cn

How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text)

青灯夜游

Release： 2018-10-11 10:52:24

Original

21814 people have browsed it

How to set the tiling mode of background image in css? This article will introduce to you how to set the background image tiling in CSS, and let you know how to set the background image in CSS to be horizontally tiled, vertically tiled, or not tiled. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When we use the background-image attribute to display a background image on the page, the background image may be tiled both horizontally and vertically due to some reasons (such as image size) The method is displayed as shown below:

How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text)

But sometimes we don’t need such a background image display method. We just want the background image to be displayed only once (not tiled), or implemented separately. Tiles horizontally, tiles vertically. We can implement these tiling methods with css!

So how to set the tiling method of background images in css? In fact, it is very simple. The css background-repeat attribute can set the tiling method of the background image. The background-repeat attribute can be used to tile the background image horizontally, vertically, or not or completely by setting the following attribute values.

repeat: Default value, set the background image to be tiled vertically and horizontally, that is: completely tiled.

repeat-x: Set the background image to be tiled horizontally.

repeat-y: Set the background image to be tiled vertically.

no-repeat: Set the background image not to be tiled, that is, only displayed once.

Let’s take a simple code example to understand how to implement these attribute values:

1, repeat Set the background image to be completely tiled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text));
				background-repeat:repeat;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

Copy after login

Rendering:

How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text)

##2. no-repeat sets the background image to not be tiled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text));
				background-repeat:no-repeat;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

Copy after login

Rendering:

How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text)

3、

repeat-x Set the background image to tile in the horizontal direction

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text));
				background-repeat:repeat-x;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

Copy after login

Rendering:

How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text)

repeat-y Set the background image to be tiled in the vertical direction

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.demo{
				width: 600px;
				height: 540px;
				margin: 50px auto;
				background-image: url(How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text));
				background-repeat:repeat-y;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

Copy after login

Rendering:

How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text)

Regarding the background-repeat attribute, there are the following

instructions:

Repeat from the original image, which is defined by background-image; you need to define the original image first, in Use the background-repeat attribute to set the tiling method.

The position of the background image is set according to the background-position property. If the background-position property is not specified, the image will be placed in the upper left corner of the element.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Video Tutorial, CSS3 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##CSS3 Online Manual

##div/css graphic tutorial

css3 special effects code collection

The above is the detailed content of How to set the tiling mode of background image in css? How to set background image tiling in css (detailed explanation with pictures and text). For more information, please follow other related articles on the PHP Chinese website!