Manipulating Background Values

Question

I have a project where I create slides described inside an XML file, but this requires a resolution of the image of the slides based on the offset values.

Now my Y is shifting down, the only problem is that I need the ability to compensate for something in X by the amount, but still keep the behavior of% age.

Thus, in any case, in order to have an initial position x, start at 50% and then shift it by the pixel size and preserve the relative behavior of the age% (50% + offsetInPixels)?

Answer 1

You cannot do this with simple CSS (for now, see Rich Bradshaw answer ).

You can do this in javascript with something like:

var totalWidth = 960;
var xOffset = 10;
el.style.backgroundPosition = ((totalWidth/2) + xOffset) +"px 50px";

Answer 2

, .

background-position: -moz-calc(50% - 20px) 0;
background-position: calc(50% - 20px) 0;

( 2011) Firefox 4 IE9.

. http://caniuse.com/#calc .

Answer 3

, - ... , works ( ) overflow:hidden, , bg .

<div id="main" >
<div id="bg"><img src="http://www.google.com/images/logos/ps_logo2.png"/>  </div   </div>

 #main {
 width:400px;
  height:300px;  
    background-color:blue;
    position:relative;
}
#bg {
 margin-left: 10px;
    position:absolute;
    width:100%;
    height:100%;
    margin-left:50%;
  }

: http://jsfiddle.net/mhy3r/10/

Answer 4

, CSS3. , .

HTML:

<div id="example">Example</div>

CSS

#example {
  width: 200px;
  height: 200px;
  padding-left: 100px;
  background-origin: content-box;
  background-position: 10px 10%;
}

This is a bit of a hack, I think. Instead of starting from the top left corner of the border field, instead it uses a content field that contains 50% (i.e. 100 pixels). As I said, you need to know the exact value of the 50% fill, as the record padding-left: 50%;will be interpreted as 50% of the parent element.

If you need the full space inside this container, you can add to it <div>withmargin-left: -100px;