title: Centering a Background Image and Auto Layout Fiasco
body: <p>I have a background image whose width is 768 pixels as shown below.  And I have several smaller images that need to be placed at the positions exactly where they are.  For example, the blue one needs to be positioned at 40, 120. </p>
  
  <p><img src="https://i.stack.imgur.com/scMQv.jpg" alt="enter image description here"></p>
  
  <p>A problem will occur when the user changes the device orientation to Landscape.  The background image is positioned at the center (Editor > Align > Horizontal Center in Container).  So the background image is laid out horizontally at the center.  The system automatically sets the x-coordinate of the blue image to 40, rather than 40 pixels from the edge of the the background image.  So little guys are misplaced.  (Expected positions are shown in white.)</p>
  
  <p><img src="https://i.stack.imgur.com/EEvja.jpg" alt="enter image description here"></p>
  
  <p>So what can I do to lay out the little guys in relation to the position of the background image?  I've done many things like selecting the background picture and a respective little guy and choosing Editor > Pin > Horizontal Spacing.  Nothing works.  Is it possible to keep relative locations regardless of the device orientation in this case?  Or should I just go without 'Auto Layout'?  The 2nd best choice is not to position the background picture.  But the app won't look good when the user changes the orientation to Landscape.</p>