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)

青灯夜游

Oct 11, 2018 am 10:52 AM

cssTile

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>

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>

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>

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>

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!

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

How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AM

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AM

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

Quick Gulp Cache BustingApr 18, 2025 am 11:23 AM

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

In Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AM

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Datalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AM

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

Front Conference in ZürichApr 18, 2025 am 11:03 AM

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

Building a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AM

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

Creating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AM

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly

See all articles