Background-position can also be used like this, backgroundposition
Article sync to public account: http://mp.weixin.qq.com/s? _ Biz = MzAxMzgwNDU3Mg ==& mid = 401626453 & idx = 1 & sn = 6af07474df847d251358c4b424eaddfd # wechat_redirect
If you are interested, scan the QR code to follow up:
The style rule of background-position should be used by those who cut the page. I will not go into details about it. Bytes.
When we set the value of backgrund-position to a percentage, how is the position of the background image calculated? When we specify background-position: 50% 50%, the actual effect is equivalent to backgrund-position: center. Its calculation rules are as follows:
X: {container (container) width-width of the background image} * x percentage. The excess part is hidden.
Y: {container (container) height-Background Image Height} * y percentage. The excess part is hidden.
In order to clearly express this point, two chestnuts are shown below.
First, the width and height of an image are 510*382.
See the following code:
<! DOCTYPE html>
<Html>
<Head>
<Style type = "text/css">
. Wrapper {
Width: 300px;
Height: 300px;
Border: 2px solid red;
Background-image: none;
}
</Style>
</Head>
<Body>
<Div class = "wrapper"> </div>
</Body>
</Html>
Its actual effect is
This is as expected. When we set background-position: 50% 50%, the running effect is as follows:
Calculated based on the formula x (300-510) * 50% =-105; y (300-382) * 50% =-41 for the position of the background image.
This is what I want to express in this blog when background-position is specified as a percentage. However, do you know this is useful? Chairman Mao once taught us that the purpose of learning lies in application. Even if you have mastered more theoretical knowledge and do not know where it can be used, it is of no value if you do not know the application scenarios.
When making mobile pages, we will find a way to adapt to various screens of different sizes. This problem must be considered on the pc end in some cases. However, is this related to background-position? When we are doing some activity pages, backgroundposition can be used for those pages that are full of a whole screen.
For the pc-side activity page, the size of the design draft is generally based on the width of 1920px. The container size in the container is usually in the center of 1000px or pixel PX. Assume that the content area size is 1000px.
This is the time for backgrundposition to display pages in browsers with a width greater than PX.
My usual practice is body {background: url(bg.jpg) 50% 0 no-repeat}
. Content {
Widh: 1000px
Margin-left: auto;
Margin-right: auto;
Overflow: hidden;
}
We make the background image of the design draft into a background image with a width of 1920 and design it as a background image with a position of 50% 0. In this way, as long as the screen is above 1000px pixels, it can be well displayed. It is also adaptive. This article describes the usage of backgroundposition in my own business requirements on the page. If you still know other related use cases or usage, please share with us.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
