Home >Web Front-end >HTML Tutorial >html set background image to full screen

html set background image to full screen

藏色散人Original: 2021-01-18 15:45:3846414browse

htmlHow to set the background image to full screen: first create a new html document; then set the background image in the same folder; then add the style tag; finally pass "background-image" and "background-repeat" The property can be used to set the background image to full screen.

Demonstration environment for this tutorial: Acer S40-51 computer, Windows10 Home Chinese version system, HTML5&&CSS3&&HBuilderX.3.0.5

Recommendation: HTML video tutorial

htmlHow to set the background image to full screen:

1. Create a new html document.

Set the HTML frame, and then set the images in the same folder.

2. Add so that you can have style settings.

Because the background is set on the main body, it must be defined as body{}.

background-image:url(图片)，这个是添加图片的意思。

3. Then we need to add background-repeat:repeat-x; at this time it will be tiled horizontally.

background-repeat:no-repeat;这样就可以不重复平铺。
background-repeat:repeat-y;这个指令是纵向平铺。
background-repeat:repeat;这样则是全屏平铺。

Complete example code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html设置背景图片全屏</title>
    <style type="text/css">
        body{
            background-image: url(1.jpg);
/*background-repeat属性定义了图像的平铺模式*/

/* background-repeat: repeat; */
/*默认值，背景图像将在垂直方向和水平方向重复,即全屏平铺*/

            background-repeat: no-repeat;
/*这个时候就会不重复平铺*/

            background-repeat: repeat-y;
/*背景图像将在垂直方向重复。*/

            background-repeat: repeat-x;
/*背景图像将在水平方向重复。*/

            /* background-size:100%; */
/* 指定背景图片大小 */

background-attachment: fixed;
/* 设置背景图像是否固定或者随着页面的其余部分滚动。 */
        }
    </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>

Full screen effect such as:

html set background image to full screen

The above is the detailed content of html set background image to full screen. 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

Previous article：How to center a web page in htmlNext article：How to center a web page in html

See more

html set background image to full screen

Related articles