How does HTML set up a background picture? How many ways to set up a background picture?
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.
Method 1. Set the background picture in HTML
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.
Method 2: CSS sets the background picture
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.