Home > Web Front-end > CSS Tutorial > How to set images not to be tiled in css

How to set images not to be tiled in css

coldplay.xixi
Release: 2023-01-05 16:12:57
Original
5442 people have browsed it

The way to set the image to be non-tileable in css is to use the [background-repeat] attribute to set the image to be non-tileable, where [no-repeat] means not to tile, that is, it will only be displayed once.

How to set images not to be tiled in css

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to set the image to be non-tiled in css:

css can use the background-repeat attribute to set the image to be non-tiled.

Attribute value:

  • repeat: Tile in both horizontal and vertical directions, this is also the default value

  • no -repeat: No tiling, that is, only displayed once

  • repeat-x: Only tiling along the horizontal direction

  • repeat-y: Only along the horizontal direction Vertical tiling

#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:

Set the picture not to be tiled

<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>
Copy after login

Rendering:

How to set images not to be tiled in css

Recommended related tutorials: CSS video tutorial

The above is the detailed content of How to set images not to be tiled in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template