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

WBOY
WBOYOriginal
2022-04-20 17:29:002760browse

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-repeat Specifies how to repeat the background image
  • background-origin Specify the positioning area 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>
Output result:


(Learning video sharing:

css video tutorialHow 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!

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