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

How to use the background-repeat attribute in css

黄舟Original: 2017-06-21 15:06:443638browse

Syntax:

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

Parameters:

repeat: Background imageTile vertically and horizontally
no-repeat: The background image is not flat Paving
repeat-x: The background image is tiled horizontally
repeat-y: The background image is tiled vertically

Description:

Sets or retrieves whether the background image of the object is and how to lay it out. The object's background image must first be specified.
The corresponding script feature is backgroundRepeat. Please see other books I have written.

Example:

menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; } 
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

Here is a 25px×25px picture. We set 3 div elements to 200px×100px, and set the div element background image to this picture.

How to use the background-repeat attribute in css

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>background-repeat属性</title>
    <style type="text/css">
        /*设置div元素的共同样式*/
        div
        {
            width:200px;
            height:100px;
            background-image:url("../App_images/lesson/run_cj/flower.jpg");
            text-align:center;
            border:1px dashed gray;
        }
        /*设置3个div元素的个别样式*/
        #div2{background-repeat:repeat-x;}
        #div3{background-repeat:repeat-y;}
        #div4{background-repeat:no-repeat;}
        hr{border-color:red;}
    </style>
</head>
<body>
    <div id="div1">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div2">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div3">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div id="div4">
        <h3>静夜思</h3>
        <p>窗前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>
    </div>
</body>
</html>

The preview effect in the browser is as follows:

How to use the background-repeat attribute in css

Analysis:

Because the first The div element does not set the background-repeat attribute value, because the browser will use the default value of background-repeat "repeat", and the background image will be tiled in both horizontal and vertical directions. The background-repeat attribute value of the second div element is "repeat-x", so the background image will be tiled horizontally (x-axis). The background-repeat attribute value of the third div element is "repeat-y", so the background image will be tiled in the vertical direction (y-axis)

You may be strange about the attribute setting of the hr element. Why is it set hr? If the border-color attribute value is red, the color of hr will change. Instead of setting the color attribute of hr to red or background-color to red? This is related to the characteristics of hr itself, which we will explain in detail in the CSS Advanced "HR CSS Settings" section.

Note: Only when the width or height of the element with a background image is larger than the width or height of the background image itself will the tiling effect occur.

The above is the detailed content of How to use the background-repeat attribute in css. 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

Previous article：html

tag syntax structure and usageNext article：html

tag syntax structure and usage

See more

How to use the background-repeat attribute in css

Related articles