title: How to resize and float right a background image using css?
body: <p>I am working on this site: <a href="http://www.problemio.com">http://www.problemio.com</a> and I have a requirement to add the background image to the top banner which I did.</p>
  
  <p>What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.</p>
  
  <p>Any idea how to do that?  So far I have this css for the overall banner div:</p>
  
  <pre><code>.banner 
  {
      width:60em;
      margin: 0 auto;
      position: relative;
      padding: 0.3em 0;
      z-index: 1;
      background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
      background-repeat: no-repeat;
      background-image: right-align
  }
  </code></pre>
  
  <p>but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div.  Any ideas? </p>
  
  <p>Thanks!</p>