HTML5 body set full screen background image example code

Time:2021-5-31

In what code? White background is not allowed because the height of mobile phone is different

The design drawing should be confirmed to be the background image (through screen base map) application scenario: mobile terminal propaganda page or activity page according to the standard (750)

Wrong way to write: add it to div and set min height with pictures, but the page will not rebound

The ultimate solution


html,body{
	width:100%;
	height:100%
}
body{
  Font family: "Chinese fine black";
  background:url("../img/Flyer-bg.png") no-repeat;
  background-size: 100%;
}

A hack solution to the vertical problem

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0">
    < title > cache
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/store.min.js"></script>
    <style>
        .parent{
            width:200px;
            height: 200px;
            /*The following properties are centered vertically*/
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #aaa;
        }
    </style>
</head>
<body>
    <div class="parent">111</div>
</body>

Other options


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="Layer1" style="position:fixed; left:0px; top:0px; width:100%; height:100%">  
    <img src="https://imgs.developpaper.com/imgs/20171214085954_shouye5.jpg" width="100%" height="100%"/>  
</body>
</html>

Clear float


.float-left {
    float: left;
}
.float-right {
    float: right;
}
.clear-fix:after {
    display: table;
    content: '';
    clear: both;
}

This article about HTML5 body setting full screen background image of the sample code is introduced here, more related to HTML5 body background image adaptive screen content, please search previous articles of developer or continue to browse the following related articles, hope you can support developer more in the future!