title: Move li/background image with window
body: <p>How do I move background images with the window upon resize? I am using a sprite, but if it is too difficult to do it that way that I can change the background image to single images. I have my code below:</p>
  
  <pre><code>html:
  &lt;nav class="topNav"&gt;
       &lt;ulstyle="list-style-type:none"&gt;
             &lt;li id="daily_sale" style="display:inline"&gt;&lt;a href="/DealOfTheDay.asp?deal=" class="deselect"&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li id="my_account" style="display:inline"&gt;&lt;a href="/login.asp" class="deselect"&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li id="support" style="display:inline"&gt;&lt;a href="/terms.asp" class="deselect"&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li id="shopping_cart" style="display:inline"&gt;&lt;a href="/shoppingcart.asp?" class="deselect"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ulstyle="list-style-type:none"&gt;&lt;/nav&gt;
  </code></pre>
  
  <p>I also included 2 images. The first one is what is happening at about 1200px. The second is what it looks like at 1000px. What I want to do is slide the 'account, support, shopping cart' images over so that the space between them does not change. The 'sale' image should not move. Do I need javascript or can I do this with CSS?</p>
  
  <p><img src="https://i.stack.imgur.com/DGvVk.png" alt="menu at 1200 px">
  <img src="https://i.stack.imgur.com/uK0Xk.png" alt="menu at 100px"></p>