CSS3 background-size and background-position issue

Question

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

I have a DIV which contains an image as background. The image itself is set bigger than the div to present a little cut-out of the original image:

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

So far everything is fine. But invoking the background-position property gets tricky if the size is ≥ 100%. I put together a little JS/CSS Playground for testing:

• If the image is ≤ 99% wide, less background-position-x means the image goes left.
• If the image is == 100% wide, background-position-x does nothing
• If the image is ≥ 101% wide, less background-position-x means the image goes right.

For the following case I calculated:

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

So I rendered a page (incl. automatic calculations) and the size is about the right size. But as I said, less background-position-x (-28%) means the image goes right, the image has the wrong position.

It would have to be moved left, because I calculated -28% "left margin". So I did a bit trial and error and it turned out that the right position would be at something around 50%.

Is this still an CSS3 issue, or is it my complete misunderstanding of the functionality of this property?

EDIT: here is an JSFiddle too

Here is a picture to illustrate my target…

Answer 1

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

So, if you want the image centered, that means that the center of the image is in the center of the container. So, this is the value that you find by trial and error.

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

If you specify 10% for the property, that would mean that the point at 10% from the left in the image is positioned at the point at 10% from the left in the container.

formula for this

How to convert from percentage to px (as requested). Lets say that you have a container o size n and the image is greater by a factor of f You specify a background position of x%. We take this as an unitary factor a being a=x*100

The position to match in the container is an. The position to match in the image is afn. The position of the image from the container is the difference, afn-an , that can be given as an(f-1).

That explains why:

The apparent result of the property is inverted when f > 1 . (the image is bigger than the container.

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

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

a(f-1)

or divide by the size of the image (fn) to give

a(f-1)/f