Home > Article > Web Front-end > How to set the background to be centered and not tiled in css
How to set the background to be centered and not tiled in css
- WBOYOriginal
- 2022-04-20 17:29:002778browse
In CSS, you can use "background:url(path) no-repeat center;" to set the background to be centered and not tiled. The background attribute is used to set the background style of the element, and "no-repeat" is used to indicate the background. Not tiling, center is used to indicate that the background is centered.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the background in css to be centered and not tiled
Just use the background attribute.
The background abbreviation attribute can set all background attributes in one statement.
Separate each value with a space, in no particular order. It is possible that only some of these values, such as background: #FF0000 URL (smiley.gif); are allowed.
The properties that can be set are:
- ##background-color specifies the background color to be used
- background-position specifies The position of the background image
- background-size Specifies the size of the background image ##background-repeat Specifies how to repeat the background image
- ##background-clip Specify the painting area of the background image
##background- attachment Sets whether the background image is fixed or scrolls with the rest of the page.
background-image Specify one or more background images to use
Examples are as follows:
<html>
<head>
<style type="text/css">
body
{
background: url(/i/eg_bg_03.gif) no-repeat center;
}
</style>
</head>
<body>
<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>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html> Output result: css video tutorial
)
The above is the detailed content of How to set the background to be centered and not tiled in css. For more information, please follow other related articles on the PHP Chinese website!