title: Responsive web design : "How to resize a background image according to browser window size using CSS"?
body: <p>I am creating a site where my all products images will be re-size according to browser window size so <strong>i wrote some media queries where i used one big image and re-sized it in different window size but</strong> i have one image which i used in background , how i can re-size it? I want support it  in all browser also in IE7 and 8.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div{ 
  background: url("http://canadianneighborpharmacy.net/images/cnp/discount_20.png") 
  no-repeat scroll 0 0 transparent;
  position:absolute;
  width:45px; 
  height: 45px; }
  </code></pre>
  
  <p>My live code is here :- <a href="http://jsfiddle.net/jamna/DdxbQ/19/" rel="nofollow noreferrer">http://jsfiddle.net/jamna/DdxbQ/19/</a> here i have a main "product image" which is now resizing according to browser window  size(in my fiddle i didn't write code for resizing product image yet,i am only showing which image i want to resize now ) but i have a another "save-money label" image which is in background of a "span" i want to re-size simultaneously with product image.</p>