title: Why isn't background-position working?
body: <p>I don't often use background-position, so maybe I'm not doing this correctly, but my css rule is not taking effect.</p>
  
  <p><code>background-position:right 353px bottom 20px;</code></p>
  
  <p>Here's the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h1&gt; 
      &lt;a href="#"&gt;
          &lt;img src="/images/silver-corner-logo.jpg" id="site-title" /&gt;
      &lt;/a&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>h1 {
      width:80%;height:154px;
      min-width:353px;
      margin:0;padding:0;
      text-align:right;
      background-color:#A8A9AD;
      background-image:url("/images/top-left.jpg");
      background-repeat:no-repeat;
      background-position:right 353px bottom 20px;
  }
  #site-title {
      margin:0;padding:0;
      display:block;
      width:353px;
      float:right;
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>It Occurs to me that maybe I should describe what it is I am trying to accomplish.  </p>
  
  <p>Within my h1, I have a logo (width 353).<br>
  The h1 may become larger than 353 depending on the screen size.</p>
  
  <p>In this case I want a background image to display to adjacent (left) to the img so that it will nicely fade into the solid background color.</p>