May 29, 2021 Article blog
When we edit a web page, if we think it is too monotonous, we can add a background map that we like. In this article, W3Cschool is a compilation that shows you how to set up a background picture in HTML, and what are the ways to set up a background picture.
The < body ></body in HTML can be set directly in the > tab. The code is as follows:
<body background="图片路径">
Effects:
If you set up a background picture directly with < body ></body >, the browser will cover the entire screen depending on the size of your picture. I f you don't want to tile the picture, you'll need additional CSS settings. This method is cumbersome.
CSS sets the background picture in much the same way that HTML sets the background picture, as follows:
<style type="text/css">
body{
background: url("图片地址");
}
</style>
So far, the picture has repeatedly covered the entire screen.
We need to optimize by adding CSS styles.
<style type="text/css">
body{
background: url("图片地址") no-repeat center center fixed;
/*兼容浏览器版本*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
The end result is as follows:
Here's an introduction to how W3Cschool's small html sets up background pictures and methods.