CSS3 original size and background position

Question

I am programming a small WP theme and need a little help with the new CSS3 background-size property.

I have a DIV that contains an image as a background. The image itself is set larger than the div to cut out the original image a bit:

.imageContainer { background-size:154% 102%; background-position-x:-28%; background-position-y:0.28%; } 

So far so good. But calling the background-position property becomes complicated if the size is ≥ 100%. I put together a small JS / CSS playground for testing:

• If the image is ≤ 99% wide, a smaller background-position-x value means that the image remains on the left.
• If the image is 100% wide, background-position-x does nothing
• If the image is ≥ 101% wide, a smaller background-position-x means that the image is going correctly.

In the following case, I calculated:

• Large container: 350x350px
• Image: 540x359px
• Means: (100/350) * 540 ≙ 154% width
• (100/350) * 359 ≙ 102%.
• Also: position-x: -28% and position-y: -0.28%

So, I made a page (including automatic calculations), and the size is about the right size. But, as I said, less background-position-x (-28%) means that the image is going correctly, the image is in the wrong position.

It will need to be shifted to the left, because I calculated -28% "left margin". Therefore, I made some trial and error, and it turned out that the correct position will be approximately 50%.

Is this still a CSS3 issue, or is this a complete misunderstanding of the functionality of this property?

EDIT: here too is JSFiddle

Here is an image illustrating my purpose ...

Answer 1

The key to your problems is that the percentage you specify gives the point at which the container and image match . This point is calculated both in the image and in the container.

So, if you want the image centered, it means that the center of the image is in the center of the container. Thus, this is the value that you discover as a result of trial and error.

The key here is 50%, because the background-position always gets a centered image, and you don't need any of your calculations

If you specify 10% for the property, this will mean that the point at 10% on the left in the image will be at the point with 10% on the left in the container.

for this

How to convert from percent to px (on request). Suppose you have a container of size n and the image is larger in f . You specify the background position x %. We take this as the unit factor a , which is a = x * 100

Matching item in container a . The position corresponding to the image, afn . The position of the image from the container is the difference, afn-a , which can be specified as a (f-1) .

This explains why:

The obvious result of the property is inverted for f> 1. (the image is larger than the container.

The result is nil when f = 1 (image is the same size as the container)

Now, to convert this percentage to space, you simply divide by the size of the container ( n ) to give

A (F-1)

or divide the image size (fn) to give

a (F-1) / f