title: Using CSS to control Sprite size in the DOM.
body: <p>Sprites:</p>
  
  <p>I did the following and it looks great but...I do not want the 400px width to display, I want it contained in another img that is 250px. Is there a way (I have tried a lot of methods) to control the sprite size with CSS or do I need a js workaround?</p>
  
  <pre><code>.portfolio a .icon1  {
      width: 400px;
      height: 250px;
      background: url('../images/gate-sprite.png') 0 0;
      background-repeat: no-repeat;
  }
  
  .portfolio a:hover .icon1 {
      width: 400px;
      height: 250px;
      background: url('../images/gate-sprite.png') 0 -250px;
      background-repeat: no-repeat;
  }
  </code></pre>