How to use the background image position background-position in CSS

Source: Internet
Author: User
When using the background picture, often encounter the background picture where the location is not what we want, how to set the background image position? The following is a description of the use of the background image position background-position in CSS.
In the background picture position property of the picture, Background-position is used to control the position of the element background picture. It accepts three kinds of values:

Keywords: such as top, right, bottom, left, center
Length values, such as PX, EM, REM, etc.
Percent:%
The most commonly used values, or best known values, are keywords and length values, with percentages of up to 0%, 50%, and 100%.
In the background picture position property, the property value generally has 2, the first represents the horizontal position, is the x axis, the second represents the vertical position, that is, the Y axis, using two attribute values to define the starting position of the background picture, if the starting position of the two direction is the same, you can use a value.

The meanings of some of these property 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 picture is the element

Right: The starting position of the background picture is the element

Bottom: The starting position of the background image is the bottom of the element

Example: Setting the background image to the left and bottom, while defining the background image uneven.

<! 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>

The above is a brief introduction of background-position, hope to help you!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: