Home > Article > Web Front-end > How to use background-position of background image position in CSS
When using background images, we often encounter that the location of the background image is not what we want. So how to set the location of the background image? The following will introduce the usage of background-position of background image position in CSS.
In the background image position attribute of the background image, background-position is used to control the position of the element's background image. It accepts three values:
Keywords: such as top, right, bottom, left, center
Length value; such as px, em, rem, etc.
Percentage value: %
General The most commonly used values or the most understood values are keywords and length values, and the most commonly used percentages are 0%, 50% and 100%.
In the background image position attribute, there are generally two attribute values. The first one represents the horizontal position, which is the X-axis; the second one represents the vertical position, which is the Y-axis. Use two attribute values to define the starting point of the background image. Position, a value can be used if the starting position is the same in both directions.
The meanings of some of the attribute values are as follows:
top: The initial position of the background image is the top of the element
center: The starting position of the background image is the middle of the element
left: The starting position of the background image is the left side of the element
right: The starting position of the background image is the right side of the element
bottom: The starting position of the background image is Bottom of element
Example: Set the position of the background image to the left and bottom, and define that the background image is not tiled.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width: 200px;height: 200px;border:1px solid #ccc;background: url(img/gift2x.png) no-repeat left bottom;}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
The above is a brief introduction to background-position, I hope it will be helpful to you!
The above is the detailed content of How to use background-position of background image position in CSS. For more information, please follow other related articles on the PHP Chinese website!