Home > Article > Web Front-end > How to set the picture not to be tiled in css
How to set the picture not to be tiled in css
- 藏色散人Original
- 2021-04-02 14:39:462707browse
How to set the image to be non-tiled in css: First create an HTML sample file; then add "background:url(img/3.jpg)no-repeat;}" to the style tag to set the image to be non-tiled. Can.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer
The background-repeat attribute of css 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 can use the background-repeat attribute to set the image not to be tiled.
Attribute value:
repeat: Tile in both horizontal and vertical directions, this is also the default value
no-repeat: Not tiling, that is, only displayed once
repeat-x: Tile only in the horizontal direction
repeat-y: Tile only in the vertical direction
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.
Example:
1. The tiling method is not set
<body>
<style>
.box{ border:1px solid #093; width:800px; height:800px;
background:url(img/3.jpg);}
</style>
<div class="box">
hello word
</div>
</body>Rendering:
2. Set the picture Not tiling
<body>
<style>
.box{ border:1px solid #093; width:800px; height:800px;
background:url(img/3.jpg)no-repeat;}
</style>
<div class="box">
hello word
</div>
</body>Rendering:
Recommended study: "css video tutorial"
The above is the detailed content of How to set the picture not to be tiled in css. For more information, please follow other related articles on the PHP Chinese website!