html set background image to full screen-HTML Tutorial-php.cn

html set background image to full screen

藏色散人

Release： 2021-01-26 17:46:50

Original

46392 people have browsed it

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(图片)，这个是添加图片的意思。

Copy after login

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;这样则是全屏平铺。

Copy after login

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>

Copy after login

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!