Table of contents
First, HTML sets the background of the web page
Second, CSS sets the background of the web page
First, HTML sets the background of the web page
< body > Use background and style to set in the body
1. Basic settings
<html>
<head>
<meta charset="UTF-8">
<title>HTML设置页面背景</title>
</head>
<body background="01.jpg" <!--background=".../...jpg'" 存放图片的路径-->
style="background-repeat:no-repeat;<!--设置图片不重复显示-->
background-attachment:fixed;<!--设置图片的位置固定-->
background-size:100% 100%; "><!--设置图片达到窗口100%的比例-->
</body>
</html>
Effect demonstration
2. Background color
Through the style attribute:
backgroud-color:transparent color
transparent : the background color is transparent color : specify the background color
There are four ways to express colors:
① Write color words directly
③rgb(x,x,x)
④rgba(x,x,x,x)—represents the transparency of the color
3. Background image
background-img :url(): Import image
background-repeat:
Tiling method:
(repeat (default) the x-axis and y-axis are tiled,
repeat-x fills repeatedly along the x-axis direction,
Repeat-y repeats filling along the y-axis direction,
no-repeat does not repeat)
backgroud-size:
Image size:
(Width and height (set specific value or Auto),
The cover covers the entire box and may overflow,
contain covers the screen as much as possible without overflowing)
background-position：length/position
Background image positioning (x-axis and y-axis are used to adjust the position of the background image or display a certain position).
If only one value is specified, this value will be used for the abscissa. The vertical axis will default to 50%.The second value is the ordinate. The value can be written in English, numbers, or negative numbers.
The positioning of this property is not affected by the setting of the padding property.
Second, CSS sets the background of the web page
1. Set the background style in the body of the selector (very simple, you can see the comments, the attributes are basically the same as HTML)
2. Introduce the css setting in HTML (<link rel="stylesheet" href="style.css">)
body{
font-family: sans-serif;/*字体加粗*/
background-image: url("03lg.jpg");/*背景图片*/
background-repeat: no-repeat;/*图片不重复*/
overflow: hidden;/*溢出隐藏*/
background-size: cover;/*背景覆盖窗口*/
}