Home > Article > Web Front-end > How to set css images not to repeat
How to set css image non-repeat: First create an HTML sample file; then introduce a background image; finally, set the attribute to "background-repeat:no-repeat" to achieve non-repeat images.
The operating environment of this article: Windows7 system, HTML5&&CSS3, Dell G3 computer.
css can use the background-repeat attribute to set the image not to repeat. The background-repeat attribute sets whether and how to repeat the background image. By default, the background image repeats horizontally and vertically.
Background-repeat attribute introduction:
The background-repeat attribute 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.
Attribute value:
repeat Default. The background image will repeat vertically and horizontally.
repeat-x The background image will repeat horizontally.
repeat-y The background image will repeat vertically.
no-repeat The background image will be displayed only once.
inherit specifies that the setting of the background-repeat attribute should be inherited from the parent element.
[Recommended: css video tutorial]
Example:
<html> <head> <style type="text/css"> body { background-image: url(/i/eg_bg_03.gif); } </style> </head> <body> </body> </html>
Rendering:
css set the picture not to repeat
<html> <head> <style type="text/css"> body { background-image: url(/i/eg_bg_03.gif); background-repeat: no-repeat } </style> </head> <body> </body> </html>
Effect picture:
The above is the detailed content of How to set css images not to repeat. For more information, please follow other related articles on the PHP Chinese website!