definition
background-positionProperty is used to set or get the initial position of the element's background image relative to the origin.
background-position basic syntax
background-position: background image horizontal position parameter background image vertical position parameter;
background-positionUsually, a combination of horizontal and vertical directions is used to define the position of the background image.
attribute value
You can set the "left and top distance" by setting background-position-xand respectively, as follows:background-position-y
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width: 600px;
height: 500px;
background-color: #ddd;
border: 1px solid #333;
border-radius: 10px;
background-image:url("cat.jpg");
background-repeat:no-repeat;
background-position-x:30px;
background-position-y:0;
}
</style>
<script>
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>
Page effect:
alignment
background-position:right bottom; // 靠右靠下对齐
background-position:30px 60px; //靠左 30px 靠上 60 px 的位置
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置
background-position:10%; // 效果同上一行，靠左 10% 靠上 50% 的位置
Centered horizontally and vertically
Set the image to be centered horizontally and vertically, as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width: 600px;
height: 500px;
background-color: #ddd;
border: 1px solid #333;
border-radius: 10px;
background-image:url("cat.jpg"); //背景的图片路径或网址
background-repeat:no-repeat; //背景图片不要重覆显示（仅显示一次）
background-position:50% 50%;
}
</style>
<script>
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>
Page effect:
background-repeat property
background-repeatThe property defines the tiling mode of the image, which is used to set whether and how to repeat the background image.
Basic syntax:
background-repeat:repeat|repeat-x|repeat-y|no-repeat;
-
repeat: The default value, the background image will repeat vertically and horizontally.
-
repeat-x: Only the horizontal position will repeat the background image.
-
repeat-y: Only the vertical position will repeat the background image.
-
no-repeat: Setting the background image will not repeat.
Include multiple background images
It is also possible to implement a box containing multiple background images, as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width: 600px;
height: 600px;
background-color: #eee;
border: 1px solid #333;
border-radius: 10px;
background-position:
top 0 left 0,
top 0 right 0,
bottom 20px left 80px,
bottom 90px right 10px;
background-image:url("78x78.png"),url("500x375.jpg"),url("300-300.jpeg"),url("350x350.png");
background-repeat:no-repeat;
background-size: 200px 200px;
}
</style>
<script>
</script>
</head>
<body>
<div class="container"></div>
</body>
</html>
Page effect:
