How to set the background to be centered and not tiled in css-Front-end Q&A-php.cn

How to set the background to be centered and not tiled in css

WBOY

Release： 2022-04-20 17:32:43

Original

2806 people have browsed it

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.

How to set the background to be centered and not tiled in css

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

Copy after login

Output result:

(Learning video sharing:

css video tutorial How to set the background to be centered and not tiled in css )

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!