Home > Article > Web Front-end > How to use the background-repeat attribute

How to use the background-repeat attribute

青灯夜游Original: 2019-02-18 14:32:3210505browse

The background-repeat property of CSS is used to set how the background image is tiled. background-repeat:repeat-x means that only the horizontal position will repeat the background image; background-repeat:repeat-y means that only the vertical position will repeat the background image.

CSS background-repeat attribute

Function: Set whether and how to repeat the background image.

Basic syntax:

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

repeat: Default value, the background image will be vertical and Repeat horizontally.

repeat-x: Only the background image will be repeated horizontally.

repeat-y: Only vertical positions will repeat the background image.

no-repeat: The background image will not be repeated.

Description: The background-repeat attribute defines the tiling mode of the image. Repeat starting from the original image, which is defined by background-image and placed according to the value of background-position.

CSS background-repeat attribute usage example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.demo1{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat;
}
.demo2{
	width: 400px;
	height: 100px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:no-repeat;
}
.demo3{
	width: 400px;
	height: 150px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-x;
}
.demo4{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	background-image:url(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
    background-repeat:repeat-y;
}
</style>
</head>

<body>
<h3>repeat设置背景图片向垂直和水平方向重复</h3>
<div class="demo1"></div>
<h3>no-repeat设置背景图片不重复</h3>
<div class="demo2"></div>
<h3>repeat-x设置背景图片向水平方向重复</h3>
<div class="demo3"></div>
<h3>repeat-y设置背景图片向垂直方向重复</h3>
<div class="demo4"></div>
</body>
</html>

Rendering:

How to use the background-repeat attribute

The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to use the background-repeat attribute. For more information, please follow other related articles on the PHP Chinese website!

css 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 use the background-position propertyNext article：How to use the background-position property

See more

How to use the background-repeat attribute

Related articles