How to use css to set whether the background image is repeated or not-Front-end Q&A-php.cn

How to use css to set whether the background image is repeated or not

醉折花枝作酒筹

Release： 2021-08-13 14:30:39

Original

2855 people have browsed it

In the previous article, we learned about the method of positioning the background image of the element. Please see "Get the background image of the CSS positioning element in one trick". This time we will learn how to set the background image to repeat. You can refer to it if necessary.

When we have a background image, how to set the tiling method of this background image?

Let’s look at a little chestnut first, let’s take the code from the previous article.

<style>
    div{
      background-image: url("images/3.jpg");
      background-repeat:no-repeat;
      background-position:left;
    }
  </style>
</head>
<body><div>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>

Copy after login

The result is

How to use css to set whether the background image is repeated or not

We can see that the background image in this small example has always been this one, but the picture appears The number of times has changed. What is the reason? As you can see, we have modified the value of the background-repeat attribute. Today we will talk about this attribute.

background-repeat Property sets whether and how to repeat the background image. The background image can repeat along the horizontal axis, the vertical axis, both axes, or not at all. By default, the background image repeats horizontally and vertically. Repeating images are clipped to the size of the element, but they can be scaled (using round) or evenly spaced (using space).

This attribute repeats from the original image, which is defined by background-image and placed according to the value of background-position.

There are four attribute values in this attribute, namely repeat, repeat-x, repeat-y and no -repeat. Among them, repeat means that the background image will repeat in the vertical and horizontal directions; repeat-x means that the background image will repeat in the horizontal direction; repeat-y means that the background image will repeat in the vertical direction; no-repeat means that the background image will not repeat and will only appear. once.

Recommended learning: css video tutorial

The above is the detailed content of How to use css to set whether the background image is repeated or not. For more information, please follow other related articles on the PHP Chinese website!